SpringMvc+AngularJS通过CORS实现跨域方案

什么是跨域请求问题？

这个问题的起因在于现代浏览器默认都会基于安全原因而阻止跨域的ajax请求，这是现代浏览器中必备的功能，但是往往给开发带来不便。

但跨域的需求却一直都在，为了跨域，勤劳勇敢的程序猿们想出了许许多多的方法，例如，jsonP、代理文件等等。但这些做法增加了许多不必要的维护成本，而且应用场景也有许多限制，例如jsonP并非XHR，所以jsonP只能使用GET传递参数。

在移动应用风生水起的如今，托HTML5的福，Mobile Web，甚至Hybird App也逐渐火起来，在本地文件系统的Web页面，也有需要获取外部数据的需求，而这些需求也必然是跨域的。同时，HTML5也来带了叫“Cross-Origin Resource Sharing”的新特性，来赋予开发者权力决定资源是否允许被跨域访问。

如何解决？
CORS，CrossOrigin Resources Sharing，也即跨源资源共享，是 HTML5 的一项特性，它定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求。

通过服务器增加一个特殊的Header[Access-Control-Allow-Origin]来告知客户端跨域的限制，如果浏览器支持CORS的话，如果判断Origin通过的话，就会允许XHR进行请求，而不需要再使用jsonP或者代理文件。

使用这个Header返回被允许请求跨域请求的来源域，例如网站duelist.cn设置了下面的Header
Access-Control-Allow-Origin: http://smdcn.net
这样设置之后，通过http://smdcn.net下的页面对于duelist.cn进行ajax请求就会被允许，而其他网站对duelist.cn依旧会被阻拦，通过这种方式网站拥有者可以自己对此进行限制。

当然，如果不想限制来源，可以通过
Access-Control-Allow-Origin: *
来允许任何站点对该资源进行跨域请求

在SpringMVC下的解决方案：

定义SimpleCORSFilter

import java.io.IOException;

import javax.servlet.Filter;

import javax.servlet.FilterChain;

import javax.servlet.FilterConfig;

import javax.servlet.ServletException;

import javax.servlet.ServletRequest;

import javax.servlet.ServletResponse;

import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Component;

@Component

public class SimpleCORSFilter implements Filter {

    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {

        HttpServletResponse response = (HttpServletResponse) res;

        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");

        chain.doFilter(req, res);

    }

    public void init(FilterConfig filterConfig) {}

    public void destroy() {}

}

web.xml:

    <filter>

      <filter-name>cors</filter-name>

      <filter-class>com.app.filter.SimpleCORSFilter</filter-class>

    </filter>

    <filter-mapping>

      <filter-name>cors</filter-name>

      <url-pattern>/*</url-pattern>

    </filter-mapping>

angularjs端代码:

        $http({

            method: "post",

            url: "http://localhost:8080/eifs/usr/login.json",

            data: {para1:"para1",para2:"para2"},

            headers: {

                'Content-Type': 'application/x-www-form-urlencoded'

            }

        }).success(function (data) {

        }).error(function (data) {

        });

       $http.get('http://localhost:8080/eifs/usr/login.json', {params:{para1:"para1",para2:"para2"},timeout: 10000})

        .success(function (data, status, headers, config) {

        }).error(function (data, status, headers, config) {

        });

参考：

spring guide：https://spring.io/guides/gs/rest-service-cors/

巴特西

SpringMvc+AngularJS通过CORS实现跨域方案

最新文章

热门文章