SpringMVC支持跨域访问的CORS配置

目前主流的跨域访问技术有JSONP和CORS，JSONP的优势在于能够支持较老版本的浏览器，弱势在于只能处理GET的请求，而CORS的优势在于能处理所有类型的请求，但弱势在于不能处理IE8以下版本的请求，说得比较笼统，悉知。

        本文主要阐述在SpringMVC中如何通过配置CORS来支持跨域访问，而前端不需要做任何配置。

        以下是配置步骤：

1.Spring的版本建议采用4.2.0.RELEASE版本；

2.web.xml中加入过滤器配置；

    <!-- CORS过滤器 start -->
    <filter>
        <filter-name>cors</filter-name>
        <filter-class>com.sdzn.filter.CorsFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>cors</filter-name>
        <url-pattern>/api/*</url-pattern>
    </filter-mapping>
    <!-- CORS过滤器 end -->

3.加入过滤器配置类

package com.sdzn.filter;

import org.springframework.stereotype.Component;

import javax.servlet.*;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;


/**
 * CorsFileter 功能描述：CORS过滤器
 *
 * @author RickyLee【l**@*.com.cn】
 * @date 2017/2/9 11:24
 */
@Component
public class CorsFilter implements Filter {

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with,Authorization");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        filterChain.doFilter(servletRequest, servletResponse);
    }

    @Override
    public void destroy() {

    }
}

4.另起一个项目或页面进行跨域测试；

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
    $(function(){
        //按钮单击时执行
        $("#testAjax").click(function(){
              //取Ajax返回结果
              //为了简单，这里简单地从文件中读取内容作为返回数据
              htmlobj=$.ajax({url:"http://192.168.0.111:8080/api/v1/test",async:false});
               //显示Ajax返回结果
               $("#myDiv").html(htmlobj.responseText);
         });
    });
</script>    
</head>
    <body>
        <div id="myDiv"><h2>通过 AJAX 改变文本</h2></div>
        <button id="testAjax" type="button">Ajax改变内容</button>
    </body>
</html>

如果页面内容有返回的json值，则跨域配置成功。

2017年2月10日追加：

发现上述配置并不能实现Cookie共享，作以下更正：

1.上述第2/3步骤可以统一改为以下配置来实现，在spring-mvc.xml中加入以下代码：

    <!-- API 接口跨域配置 -->
    <mvc:cors>
        <mvc:mapping path="/api/**"
                     allowed-origins="http://d.demo.com:8080"
                     allowed-methods="POST, GET, OPTIONS, DELETE, PUT"
                     allowed-headers="Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"
                     allow-credentials="true" />
    </mvc:cors>

2.网页端用ajax发起需要cookie上传功能支持，具体代码如下：

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
    $(function(){
        $("#testAjax").click(function(){
			  $.ajax("http://192.168.0.111:8080/api/v1/test", {
				type: "POST",
				data: {username:"Ricky"},
				dataType: "json",
				xhrFields: {
					withCredentials: true
				},
				crossDomain: true,
				success: function(data, status, xhr) {
					$("#myDiv").html(count+data.message);
				}
			  });
         });
    });
</script>    
</head>
    <body>
        <div id="myDiv"><h2>Change AJAX Value</h2></div>
        <button id="testAjax" type="button">Ajax Click To Change</button>
    </body>
</html>

3.在本地hosts配置中加入

127.0.0.1      d.demo.com

4.将服务端部署在192.168.0.111的机器上，在本机上启动tomcat用http://d.demo.com:8080/index.html进行访问，可以看到，虽然是在不同的域名下，但是仍然可以取得cookie中的值，但如果去掉下面这个配置则不能读到cookie

xhrFields: {
	withCredentials: true
},
crossDomain: true,