jsonp跨域請求詳解

2019-11-19 16:05:10

字體：大中小

供稿：網(wǎng)友

前端時間因為太忙，一直沒有處理跨域這個事情，今天抽了一個小時輕松解決，突然發(fā)現(xiàn)上個月又寫了很多重復(fù)代碼。因為現(xiàn)在公司項目分為多個工程，前后端完全分離，manage工程做所有業(yè)務(wù)邏輯處理，app、微信兩個前置工程通過httpClient去調(diào)用manage工程的restful接口，而我就是負(fù)責(zé)微信這個工程，久而久之發(fā)現(xiàn)真的重復(fù)了很多controller層的代碼，愈發(fā)激活了這個所有接口支持瀏覽器跨域請求的封裝。話不多講，見核心代碼

1.定義一個類，繼承MappingJackson2HttpMessageConverter，重寫writeInternal方法，方法里簡單判斷一下是否帶有callback參數(shù)，沒有直接返回數(shù)據(jù)，有的話將數(shù)據(jù)用callback參數(shù)的值括號包裹起來返回。

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的支持的標(biāo)識，在請求參數(shù)中加該參數(shù) private String callbackName; @Override protected void writeInternal(Object object, HttpOutputMessage outputMessage) throws IOException,   HttpMessageNotWritableException {  // 從threadLocal中獲取當(dāng)前的Request對象  HttpServletRequest request = ((ServletRequestAttributes) RequestContextHolder    .currentRequestAttributes()).getRequest();  String callbackParam = request.getParameter(callbackName);  if (StringUtils.isEmpty(callbackParam)) {   // 沒有找到callback參數(shù)，直接返回json數(shù)據(jù)   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掃描路徑，這樣每次請求過來都會調(diào)起MappingJackson2HttpMessageConverter類里的riteInternal這個方法，如果請求帶上了callback參數(shù)，則將以callbackValue('data')格式的數(shù)據(jù)返回給前端。

<!-- 定義注解驅(qū)動 --> <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方式調(diào)用，這里做了一些代碼節(jié)省，關(guān)鍵代碼已紅色標(biāo)出

<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