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,

服务端和客户端相关代码下载地址如下:

http://download.csdn.net/detail/lishirong/9751618

如有疑问请留言




评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值