您的位置：首页 > 编程语言 > Java开发

SpringMVC支持跨域访问的CORS配置

2017-08-28 17:04 302 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航