什么是跨域請求問題？

這個(gè)問題的起因在于現(xiàn)代瀏覽器默認(rèn)都會(huì)基于安全原因而阻止跨域的Ajax請求，這是現(xiàn)代瀏覽器中必備的功能，但是往往給開發(fā)帶來不便。

但跨域的需求卻一直都在，為了跨域，勤勞勇敢的程序猿們想出了許許多多的方法，例如，jsonP、代理文件等等。但這些做法增加了許多不必要的維護(hù)成本，而且應(yīng)用場景也有許多限制，例如jsonP并非XHR，所以jsonP只能使用GET傳遞參數(shù)。

在移動(dòng)應(yīng)用風(fēng)生水起的如今，托HTML5的福，Mobile Web，甚至Hybird App也逐漸火起來，在本地文件系統(tǒng)的Web頁面，也有需要獲取外部數(shù)據(jù)的需求，而這些需求也必然是跨域的。同時(shí)，HTML5也來帶了叫“Cross-Origin Resource Sharing”的新特性，來賦予開發(fā)者權(quán)力決定資源是否允許被跨域訪問。

如何解決？CORS，CrossOrigin Resources Sharing，也即跨源資源共享，是 HTML5 的一項(xiàng)特性，它定義了一種瀏覽器和服務(wù)器交互的方式來確定是否允許跨域請求。

通過服務(wù)器增加一個(gè)特殊的Header[access-Control-Allow-Origin]來告知客戶端跨域的限制，如果瀏覽器支持CORS的話，如果判斷Origin通過的話，就會(huì)允許XHR進(jìn)行請求，而不需要再使用jsonP或者代理文件。

使用這個(gè)Header返回被允許請求跨域請求的來源域，例如網(wǎng)站duelist.cn設(shè)置了下面的HeaderAccess-Control-Allow-Origin: http://smdcn.net這樣設(shè)置之后，通過http://smdcn.net下的頁面對于duelist.cn進(jìn)行ajax請求就會(huì)被允許，而其他網(wǎng)站對duelist.cn依舊會(huì)被阻攔，通過這種方式網(wǎng)站擁有者可以自己對此進(jìn)行限制。

當(dāng)然，如果不想限制來源，可以通過Access-Control-Allow-Origin: *來允許任何站點(diǎn)對該資源進(jìn)行跨域請求

在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;@Componentpublic 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/