SpringMVC支持跨域访问的CORS配置

来源：互联网发布：网络电影丧尸李志开播编辑：程序博客网时间：2024/05/21 11:27

目前主流的跨域访问技术有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 */@Componentpublic 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,

阅读全文

0 0