快速解决跨域请求问题:jsonp和CORS
网上各种跨域教程，各种实践，各种问答，除了简单的jsonp以外，很多说CORS的都是行不通的，老是缺那么一两个关键的配置。本文只想解决问题，所有的代码经过亲自实践。
本文解决跨域中的get、post、data、cookie等这些问题。
本文只会说get请求和post请求，读者请把post请求理解成除get请求外的所有其他请求方式。
JSONP
JSONP是利用浏览器对script的资源引用没有同源限制，通过动态插入一个script标签，当资源加载到页面后会立即执行的原理实现跨域的。JSONP是一种非正式传输协议，该协议的一个要点就是允许用户传递一个callback或者开始就定义一个回调方法，参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。
JSONP只支持GET请求而不支持POST等其它类型的HTTP请求,它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题，JSONP的优势在于支持老式浏览器，弊端也比较明显：需要客户端和服务端定制进行开发，服务端返回的数据不能是标准的Json数据，而是callback包裹的数据。
jsonp的原理很简单，利用了【前端请求静态资源的时候不存在跨域问题】这个思路。
但是只支持get，只支持get，只支持get。
注意一点，既然这个方法叫jsonp，后端数据一定要使用json数据，不能随便的搞个字符串什么的，不然你会觉得结果莫名其妙的。
前端jQuery写法
$.ajax({
type:"get",
url:baseUrl+"/jsonp/get",
dataType:"jsonp",
success:function(response){
$("#response").val(JSON.stringify(response));
}
});
dataType:“jsonp”。除了这个，其他配置和普通的请求是一样的。
后端SpringMVC配置
如果你也使用SpringMVC，那么配置一个jsonp的Advice就可以了，这样我们写的每一个Controller方法就完全不需要考虑客户端到底是不是jsonp请求了，Spring会自动做相应的处理。
@ControllerAdvice
publicclassJsonpAdviceextendsAbstractJsonpResponseBodyAdvice{
publicJsonpAdvice(){
//这样如果请求中带callback参数，Spring就知道这个是jsonp的请求了
super("callback");
}
}
以上写法要求SpringMVC版本不低于3.2，低于3.2的我只能说，你们该升级了。
后端非SpringMVC配置
以前刚工作的时候，Struts2还红遍天，几年的光景，SpringMVC就基本统治下来了国内市场。
偷懒一下，这里贴个伪代码吧，在我们的方法返回前端之前调一下wrap方法：
@ControllerAdvice
publicclassJsonpAdviceextendsAbstractJsonpResponseBodyAdvice{
publicJsonpAdvice(){
//这样如果请求中带callback参数，Spring就知道这个是jsonp的请求了
super("callback");
}
}
CORS
Cross-OriginResourceSharing
CORS是现代浏览器支持跨域资源请求的一种方式，全称是"跨域资源共享"（Cross-originresourcesharing），当使用XMLHttpRequest发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin，后台进行一系列处理，如果确定接受请求则在返回结果中加入一个响应头：Access-Control-Allow-Origin;浏览器判断该相应头中是否包含Origin的值，如果有则浏览器会处理响应，我们就可以拿到响应数据，如果不包含浏览器直接驳回，这时我们无法拿到响应数据。
CORS与JSONP的使用目的相同，但是比JSONP更强大，CORS支持所有的浏览器请求类型，承载的请求数据量更大，开放更简洁，服务端只需要将处理后的数据直接返回，不需要再特殊处理。
毕竟jsonp只支持get请求，肯定不能满足我们的所有的请求需要，所以才需要搬出CORS。
国内的web开发者还是比较苦逼的，用户死不升级浏览器，老板还死要开发者做兼容。
CORS支持以下浏览器，目前来看，浏览器的问题已经越来越不重要了，连淘宝都不支持IE7了~~~
Chrome3+
Firefox3.5+
Opera12+
Safari4+
InternetExplorer8+
前端jQuery写法
直接看代码吧：
$.ajax({
type:"POST",
url:baseUrl+"/jsonp/post",
dataType:'json',
crossDomain:true,
xhrFields:{
withCredentials:true
},
data:{
name:"name_from_frontend"
},
success:function(response){
console.log(response)//返回的json数据
$("#response").val(JSON.stringify(response));
}
});
dataType:“json”，这里是json，不是jsonp，不是jsonp，不是jsonp。
crossDomain:true，这里代表使用跨域请求
xhrFields:{withCredentials:true}，这样配置就可以把cookie带过去了，不然我们连session都没法维护，很多人都栽在这里。当然，如果你没有这个需求，也就不需要配置这个了。
后端SpringMVC配置
对于大部分的web项目，一般都会有mvc相关的配置类，此类继承自WebMvcConfigurerAdapter。如果你也使用SpringMVC4.2以上的版本的话，直接像下面这样添加这个方法就可以了：
@Configuration
publicclassWebConfigextendsWebMvcConfigurerAdapter{
@Override
publicvoidaddCorsMappings(CorsRegistryregistry){
registry.addMapping("/**/*").allowedOrigins("*");
}
}
如果很不幸你的项目中SpringMVC版本低于4.2，那么需要「曲线救国」一下：
publicclassCrossDomainFilterextendsOncePerRequestFilter{
@Override
protectedvoiddoFilterInternal(HttpServletRequestrequest,HttpServletResponseresponse,FilterChainfilterChain)throwsServletException,IOException{
response.addHeader("Access-Control-Allow-Origin","*");//如果提示*不行，请往下看
response.addHeader("Access-Control-Allow-Credentials","true");
response.addHeader("Access-Control-Allow-Methods","GET,POST,PUT,DELETE");
response.addHeader("Access-Control-Allow-Headers","Content-Type");
filterChain.doFilter(request,response);
}
}
在web.xml中配置下filter：
CrossDomainFilter com.javadoop.filters.CrossDomainFilter CrossDomainFilter /*
有很多项目用shiro的，也可以通过配置shiro过滤器的方式，这里就不介绍了。
注意了，我说的是很笼统的配置，对于大部分项目是可以这么笼统地配置的。文中类似“*”这种配置读者应该都能知道怎么配。
如果读者发现浏览器提示不能用‘*'符号，那读者可以在上面的filter中根据request对象拿到请求头中的referer（request.getHeader(“referer”)），然后动态地设置“Access-Control-Allow-Origin”：
Stringreferer=request.getHeader("referer");
if(StringUtils.isNotBlank(referer)){
URLurl=newURL(referer);
Stringorigin=url.getProtocol()+"://"+url.getHost();
response.addHeader("Access-Control-Allow-Origin",origin);
}else{
response.addHeader("Access-Control-Allow-Origin","*");
}
前端非jQuery写法
jQuery一招鲜吃遍天的日子是彻底不在了，这里就说说如果不使用jQuery的话，怎么解决post跨域的问题。
来一段原生js介绍下：
functioncreateCORSRequest(method,url){
varxhr=newXMLHttpRequest();
if("withCredentials"inxhr){
//如果有withCredentials这个属性，那么可以肯定是XMLHTTPRequest2对象。看第三个参数
xhr.open(method,url,true);
}elseif(typeofXDomainRequest!="undefined"){
//此对象是IE用来跨域请求的
xhr=newXDomainRequest();
xhr.open(method,url);
}else{
//如果是这样，很不幸，浏览器不支持CORS
xhr=null;
}
returnxhr;
}
varxhr=createCORSRequest('GET',url);
if(!xhr){
thrownewError('CORSnotsupported');
}
其中，Chrome，Firefox，Opera，Safari这些「程序员友好」的浏览器使用的是XMLHTTPRequest2对象。IE使用的是XDomainRequest。
总结
以上就是本文关于快速解决跨域请求问题:jsonp和CORS的全部内容，希望对大家有所帮助。感兴趣的朋友可以继续参阅本站其他相关专题，如有不足之处，欢迎留言指出！