jsonp跨域请求详解

前端时间因为太忙，一直没有处理跨域这个事情，今天抽了一个小时轻松解决，突然发现上个月又写了很多重复代码。因为现在公司项目分为多个工程，前后端完全分离，manage工程做所有业务逻辑处理，app、微信两个前置工程通过httpClient去调用manage工程的restful接口，而我就是负责微信这个工程，久而久之发现真的重复了很多controller层的代码，愈发激活了这个所有接口支持浏览器跨域请求的封装。话不多讲，见核心代码

1.定义一个类，继承MappingJackson2HttpMessageConverter，重写writeInternal方法，方法里简单判断一下是否带有callback参数，没有直接返回数据，有的话将数据用callback参数的值括号包裹起来返回。

import java.io.IOException;

import javax.servlet.http.HttpServletRequest;

import org.apache.commons.io.IOUtils;
import org.apache.commons.lang3.StringUtils;
import org.springframework.http.HttpOutputMessage;
import org.springframework.http.converter.HttpMessageNotWritableException;
import org.springframework.http.converter.json.MappingJackson2HttpMessageConverter;
import org.springframework.web.context.request.RequestContextHolder;
import org.springframework.web.context.request.ServletRequestAttributes;

import com.fasterxml.jackson.core.JsonEncoding;
import com.fasterxml.jackson.core.JsonProcessingException;

public class CallbackMappingJackson2HttpMessageConverter extends MappingJackson2HttpMessageConverter {

 // 做jsonp的支持的标识，在请求参数中加该参数
 private String callbackName;

 @Override
 protected void writeInternal(Object object, HttpOutputMessage outputMessage) throws IOException,
   HttpMessageNotWritableException {
  // 从threadLocal中获取当前的Request对象
  HttpServletRequest request = ((ServletRequestAttributes) RequestContextHolder
    .currentRequestAttributes()).getRequest();
  String callbackParam = request.getParameter(callbackName);
  if (StringUtils.isEmpty(callbackParam)) {
   // 没有找到callback参数，直接返回json数据
   super.writeInternal(object, outputMessage);
  } else {
   JsonEncoding encoding = getJsonEncoding(outputMessage.getHeaders().getContentType());
   try {
    String result = callbackParam + "(" + super.getObjectMapper().writeValueAsString(object)
      + ");";
    IOUtils.write(result, outputMessage.getBody(), encoding.getJavaName());
   } catch (JsonProcessingException ex) {
    throw new HttpMessageNotWritableException("Could not write JSON: " + ex.getMessage(), ex);
   }
  }

 }

 public String getCallbackName() {
  return callbackName;
 }

 public void setCallbackName(String callbackName) {
  this.callbackName = callbackName;
 }

}

2.定义Java bean，注意修改class扫描路径，这样每次请求过来都会调起MappingJackson2HttpMessageConverter类里的riteInternal这个方法，如果请求带上了callback参数，则将以callbackValue('data')格式的数据返回给前端。

<!-- 定义注解驱动 -->
 <mvc:annotation-driven>
  <mvc:message-converters register-defaults="true">
   <bean
    class="xxx.xxx.xxx.CallbackMappingJackson2HttpMessageConverter">
    <property name="callbackName" value="callback" />
   </bean>
  </mvc:message-converters>
 </mvc:annotation-driven>

3.前端通过jquery封装的ajax方式调用，这里做了一些代码节省，关键代码已红色标出

<script type="text/javascript">
 var feedback = {
  init: function(){
   var self = feedback;
   self.bind();
  },
  test: function(data){
   console.log("测试jsonp",data)
  },
  bind: function(){
    var self = feedback;

    var par = {};
     par.callback = 'feedback.test';

    $.ajax({ 
    url:"http://manage.danong.com/rest/open/queryInviteList", 
    data: par,
    dataType:'jsonp', 
    jsonp:'callback', 
    timeout:3000 
   }); 
  }
 }
 feedback.init();
</script>

4.浏览器打印log

 

 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持北冥有鱼。

您可能感兴趣的文章:

• 基于ajax和jsonp的原生封装(实例)
• 原生js的ajax和解决跨域的jsonp(实例讲解)
• 基于js原生和ajax的get和post方法以及jsonp的原生写法实例
• 全面解析Ajax和jsonp使用总结
• 使用原生js封装的ajax实例(兼容jsonp)
• 利用jsonp与代理服务器方案解决跨域问题
• Angular2 http jsonp的实例详解
• get post jsonp三种数据交互形式实例详解
• 用nodejs实现json和jsonp服务的方法
• 使用jquery的jsonp如何发起跨域请求及其原理详解
• 详解java 中Spring jsonp 跨域请求的实例
• Vue2.0 vue-source jsonp 跨域请求
• 原生js jquery ajax请求以及jsonp的调用方法
• 深入讲解xhr（XMLHttpRequest）/jsonp请求之abort
• AngularJS实现的JSONP跨域访问数据传输功能详解
• 关于jQuery.ajax()的jsonp碰上post详解
• jQuery Jsonp跨域模拟搜索引擎
• 详细分析jsonp的原理和实现方式