跨域请求之CORS篇

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做出的请求处理的方法，具体还要看具体用的什么请求服务，条件限制比较大，对游览器稍微有点限制，但是这两种方法均经过本人测试，非常有效解决问题。