CORS跨域请求
ajax跨域请求过程可能会碰到 CORS 头缺少 'Access-Control-Allow-Origin'的情况,出现这种情况的原因主要是CORS没有配置完善。本文主要梳理一下在ajax的cors跨域方面遇到的疏忽问题。
请求端js代码,看起来和普通的ajax请求没有什么分别。
var url = urlIp+"api/serverCors";
$.ajax({
url: url,
type: 'POST',
dataType: 'json',
data: params,
success: function (json) {
if (json && json.success) {
$.dialog({
type : 'alert',
content : '数据添加成功!',
onclose : function() {
parent.dialog.get(window).close();
}
});
} else {
if (json) {
swal(json['msg']);
}
}
},
error:function(XMLHttpRequest, textStatus, errorThrown){
swal('网络错误,请关闭窗口稍后重试!');
}
});
被请求端接口方法,与普通的接口方法差别也不大。
@RequestMapping(value= "/api/serverCors" , method = RequestMethod.POST)
@ResponseBody
public Map<String, Object> serverCors() {
Map<String, Object> result = new HashMap<String, Object>();
boolean flag = true;
String message = "";
------
服务端逻辑处理代码
------
result.put("success", flag);
result.put("msg", message);
return result;
}
CORS跨域请求的关键部分在于对tomcat的web.xml配置。
tomcat自带的corsfilter,一定要放在web.xml配置filter部分的开头部分。
<filter>
<filter-name>CorsFilter</filter-name>
<filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
<init-param>
<param-name>cors.allowed.methods</param-name>
<param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
</init-param>
<init-param>
<param-name>cors.allowed.headers</param-name>
<param-value>Access-Control-Allow-Origin,Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
</init-param>
<async-supported>true</async-supported>
</filter>
<filter-mapping>
<filter-name>CorsFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
网上还有使用第三方jar包的corsfilter,经过本人测试效果同tomcat自带的corsfilter同样可以解决cors方式跨域的请求,同样一定要放在被请求端服务器的web.xml配置filter部分的开头部分,但是tomcat的lib目录下面要添加相关的第三方jar包,cors-filter-1.7.jar和java-property-utils-1.9.jar。
jar包下载地址:cors-filter-1.7.jar和java-property-utils-1.9.jar
<!-- 添加tomcat跨域请求Cors -->
<filter>
<filter-name>CORS</filter-name>
<filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
<init-param>
<param-name>cors.allowOrigin</param-name>
<param-value>*</param-value>
</init-param>
<init-param>
<param-name>cors.supportedMethods</param-name>
<param-value>GET, POST, HEAD, PUT, DELETE</param-value>
</init-param>
<init-param>
<param-name>cors.supportedHeaders</param-name>
<param-value>Accept, Origin, X-Requested-With, Content-Type, Last-Modified</param-value>
</init-param>
<init-param>
<param-name>cors.exposedHeaders</param-name>
<param-value>Set-Cookie</param-value>
</init-param>
<init-param>
<param-name>cors.supportsCredentials</param-name>
<param-value>true</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>CORS</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
本文主要是针对tomcat的cors做出的请求处理的方法,具体还要看具体用的什么请求服务,条件限制比较大,对游览器稍微有点限制,但是这两种方法均经过本人测试,非常有效解决问题。