跨域解決 & ajax post 請求springmvc ctr 問題

1何爲跨域

簡單的說即爲瀏覽器限制訪問A站點下的js代碼對B站點下的url進行ajax請求。假如當前域名是www.abc.com，那麼在當前環境中運行的js代碼，出於安全考慮，正常情況下不能訪問www.zzz.com域名下的資源。

• 例如：以下代碼再本域名下可以通過js代碼正常調用接口

(function() {
    var url = "http://localhost:8080/api/Home/update.json";

    var data = {
        "userId": 123,
        "userName": "wangdachui"
    };
    $.ajax({
        url: url,
        type: 'POST',
        dataType: 'json',
        data: $.toJSON(data),
        contentType: 'application/json'
    }).done(function(result) {
        console.log("success");
        console.log(result);
    }).fail(function() {
        console.log("error");
    })
})()

輸出爲:

Object {userId: 123, userName: "adminUpdate-wangdachui"}

• 但是在其他域名下訪問則出錯:

OPTIONS http://localhost:8080/api/Home/update.json
XMLHttpRequest cannot load http://localhost:8080/api/Home/update.json. Response to preflight request 

2跨域處理流程（原理）看下圖

如果你可以翻牆可以訪問這篇外文（https://en.wikipedia.org/wiki/Cross-origin_resource_sharing）說的非常清楚

3解決跨域方案

（1）jsonp

使用jsonp來進行跨域是一種比較常見的方式，但是在接口已經寫好的情況下，無論是服務端還是調用端都需要進行改造且要兼容原來的接口，工作量偏大，於是我們考慮其他方法。如果想了解請在網上找有很多詳細解釋不再此處詳細解說。

（2）CORS 協議

cors 基本流程：首先發出預檢驗（Preflight）請求，它先向資源服務器發出一個OPTIONS方法、包含“Origin”頭的請求。該回復可以控制COR請求的方法，HTTP頭以及驗證等信息。只有該請求獲得允許以後，纔會發起真實的外域請求。

最明白了結的可根據跨域流程圖來看當瀏覽器預檢測外域訪問時會有一個 預檢（PreFlight）過程只有當資源服務器返回相應的協議纔可以允許訪問主要解決方案就是資源服務器設置過濾：

public class CORSFilter implements Filter {
    public void destroy() {
    }

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

        HttpServletResponse response = (HttpServletResponse) resp;
        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","Origin, X-Requested-With, Content-Type, Accept");
        response.setHeader("","");response.setHeader("","");
        chain.doFilter(req, resp);
    }

    public void init(FilterConfig config) throws ServletException {

    }

}

頭註釋：

Access-Control-Allow-Origin: http://foo.org

Access-Control-Max-Age: 3628800

Access-Control-Allow-Methods: GET，PUT, DELETE

Access-Control-Allow-Headers: content-type

"Access-Control-Allow-Origin"表明它允許"http://foo.org"發起跨域請求

"Access-Control-Max-Age"表明在3628800秒內，不需要再發送預檢驗請求，可以緩存該結果

"Access-Control-Allow-Methods"表明它允許GET、PUT、DELETE的外域請求

"Access-Control-Allow-Headers"表明它允許跨域請求包含content-type頭

到此你已經完全解決了跨域問題但是我想在你做js 請求spring mvc 的ctr  比如jquery、angularjs、等等封裝的ajax post 請求是總是會有一些問題，這個我據我所知是你沒有把那個json字符串和json對象分清楚,或則你就是完全沒有用json格式發完了就出現了415 錯誤。關於這個有時間再分享。

其實這些也是我在一些外文網站看了才豁然開朗的現把地址奉上，如果你可以翻牆望看原文=====》

https://en.wikipedia.org/wiki/File:Flowchart_showing_Simple_and_Preflight_XHR.svg

http://pingguohe.net/2016/03/21/ajax-solution-spring.html