快捷導(dǎo)航

jsonp跨域請求詳解

更新時間：2017年07月13日 16:36:45 作者：liliangel

這篇文章主要為大家詳細介紹了jsonp跨域請求的相關(guān)資料，激活了所有接口支持瀏覽器跨域請求的封裝，具有一定的參考價值，感興趣的小伙伴們可以參考一下

前端時間因為太忙，一直沒有處理跨域這個事情，今天抽了一個小時輕松解決，突然發(fā)現(xiàn)上個月又寫了很多重復(fù)代碼。因為現(xiàn)在公司項目分為多個工程，前后端完全分離，manage工程做所有業(yè)務(wù)邏輯處理，app、微信兩個前置工程通過httpClient去調(diào)用manage工程的restful接口，而我就是負責微信這個工程，久而久之發(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的支持的標識，在請求參數(shù)中加該參數(shù)
 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參數(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)鍵代碼已紅色標出

<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