nginx解決瀏覽器跨域問題

1.跨域問題
瀏覽器出於安全方面的考慮，只容許與本域下的接口交互。不一樣源的客戶端腳本在沒有明確受權的狀況下，不能讀寫對方的資源。
例如訪問www.test1.com 頁面, 返回的文件中須要ajax向www.test2.com這個後臺接口發起請求, 瀏覽器就會認爲是跨域請求, 會向www.test2.com後臺接口發起一個options的請求, 若是這個後臺接口在響應報文中添加了以下幾個響應頭, 表示瀏覽器能夠發起跨域請求
若是沒有瀏覽器會拒絕發起請求

2.在後端接口url（www.test2.com）的nginx上添加以下配置

server {

    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

    if ($request_method = 'OPTIONS') {
        return 204;
    }
}

3.解釋

Access-Control-Allow-Origin
服務器默認是不被容許跨域的。給Nginx服務器配置`Access-Control-Allow-Origin *`後，表示服務器能夠接受全部的請求源（Origin）,即接受全部跨域的請求。
Access-Control-Allow-Headers 是爲了防止出現如下錯誤：
Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.

這個錯誤表示當前請求Content-Type的值不被支持。實際上是咱們發起了"application/json"的類型請求致使的。這裏涉及到一個概念：預檢請求（preflight request）,請看下面"預檢請求"的介紹。

Access-Control-Allow-Methods 是爲了防止出現如下錯誤：
Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.

給OPTIONS 添加 204的返回，是爲了處理在發送POST請求時Nginx依然拒絕訪問的錯誤
發送"預檢請求"時，須要用到方法 OPTIONS ,因此服務器須要容許該方法。

參考文檔： https://segmentfault.com/a/1190000012550346?utm_source=tag-newest