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