快捷導(dǎo)航

jsonp跨域請(qǐng)求詳解

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

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

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

1.定義一個(gè)類，繼承MappingJackson2HttpMessageConverter，重寫writeInternal方法，方法里簡(jiǎn)單判斷一下是否帶有callback參數(shù)，沒(méi)有直接返回?cái)?shù)據(jù)，有的話將數(shù)據(jù)用callback參數(shù)的值括號(hào)包裹起來(lái)返回。

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í)，在請(qǐng)求參數(shù)中加該參數(shù)
 private String callbackName;

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

<!-- 定義注解驅(qū)動(dòng) -->
 <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.前端通過(guò)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("測(cè)試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