jsonp跨域请求详解

2019-11-19 16:05:10

字体：大中小

来源：转载

供稿：网友

前端时间因为太忙，一直没有处理跨域这个事情，今天抽了一个小时轻松解决，突然发现上个月又写了很多重复代码。因为现在公司项目分为多个工程，前后端完全分离，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