在线报名小程序_jsonp跨域请求详解

jsonp跨域请求详解       这篇文章主要为大家详细介绍了jsonp跨域请求的相关资料,激活了所有接口支持浏览器跨域请求的封装,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

前端时间因为太忙,一直没有处理跨域这个事情,今天抽了一个小时轻松解决,突然发现上个月又写了很多重复代码。因为现在公司项目分为多个工程,前后端完全分离,manage工程做所有业务逻辑处理,app、微信两个前置工程通过httpClient去调用manage工程的restful接口,而我就是负责微信这个工程,久而久之发现真的重复了很多controller层的代码,愈发激活了这个所有接口支持浏览器跨域请求的封装。话不多讲,见核心代码

1.定义一个类,继承MappingJackson2HttpMessageConverter,重写writeInternal方法,方法里简单判断一下是否带有callback参数,没有直接返回数据,有的话将数据用callback参数的值括号包裹起来返回。

import java.io.IOException;
import javax.servlet.http.HttpServletRequest;
import mons.io.IOUtils;
import mons.lang3.StringUtils;
.springframework.http.HttpOutputMessage;
.springframework.http.converter.HttpMessageNotWritableException;
.springframework.http.converter.json.MappingJackson2HttpMessageConverter;
.springframework.web.context.request.RequestContextHolder;
.springframework.web.context.request.ServletRequestAttributes;
.fasterxml.jackson.core.JsonEncoding;
.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
 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:"rest/open/queryInviteList", 
 data: par,
 dataType:'jsonp', 
 jsonp:'callback', 
 timeout:3000 
 }); 
 feedback.init();
 /script 

4.浏览器打印log

 

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。