【Nginx】還不會使用Nginx解決跨域問題？肝這一篇就夠了！！

為何會跨域？

出于浏覽器的同源政策限制。同源政策（Sameoriginpolicy）是一種約定，它是浏覽器最核心也最基本的安全功能，如果缺少了同源政策，則浏覽器的正常功能可能都會受到影響。可以說Web是建構在同源政策基礎之上的，浏覽器隻是針對同源政策的一種實作。同源政策會阻止一個域的javascript腳本和另外一個域的内容進行互動。所謂同源（即指在同一個域）就是兩個頁面具有相同的協定（protocol），主機（host）和端口号（port）。

Nginx如何解決跨域？

這裡，我們利用Nginx的反向代理功能解決跨域問題，至于，什麼是Nginx的反向代理，大家就請自行百度或者谷歌吧。

Nginx作為反向代理伺服器，就是把http請求轉發到另一個或者一些伺服器上。通過把本地一個url字首映射到要跨域通路的web伺服器上，就可以實作跨域通路。對于浏覽器來說，通路的就是同源伺服器上的一個url。而Nginx通過檢測url字首，把http請求轉發到後面真實的實體伺服器。并通過rewrite指令把字首再去掉。這樣真實的伺服器就可以正确處理請求，并且并不知道這個請求是來自代理伺服器的。

Nginx解決跨域案例

使用Nginx解決跨域問題時，我們可以編譯Nginx的nginx.conf配置檔案，例如，将nginx.conf檔案的server節點的内容編輯成如下所示。

server {
        location / {
            root   html;
            index  index.html index.htm;
            //允許cros跨域通路
            add_header 'Access-Control-Allow-Origin' '*';
        }
        //自定義本地路徑
        location /apis {
            rewrite  ^.+apis/?(.*)$ /$1 break;
            include  uwsgi_params;
            proxy_pass   http://www.binghe.com;
       }
}      

然後我把項目部署在nginx的html根目錄下，在ajax調用時設定url從

http://www.binghe.com/apistest/test

變為

http://www.binghe.com/apis/apistest/test

然後成功解決。

假設，之前我在頁面上發起的Ajax請求如下所示。

$.ajax({
        type:"post",
        dataType: "json",
        data:{'parameter':JSON.stringify(data)},
        url:"http://www.binghe.com/apistest/test",
        async: flag,
        beforeSend: function (xhr) {
            xhr.setRequestHeader("Content-Type", submitType.Content_Type);
            xhr.setRequestHeader("user-id", submitType.user_id);
            xhr.setRequestHeader("role-type", submitType.role_type);
            xhr.setRequestHeader("access-token", getAccessToken().token);
        },
        success:function(result, status, xhr){
        }
        ,error:function (e) {
            layerMsg('請求失敗，請稍後再試')
        }
    });      

修改成如下的請求即可解決跨域問題。

$.ajax({
        type:"post",
        dataType: "json",
        data:{'parameter':JSON.stringify(data)},
        url:"http:www.binghe.com/apis/apistest/test",
        async: flag,
        beforeSend: function (xhr) {
            xhr.setRequestHeader("Content-Type", submitType.Content_Type);
            xhr.setRequestHeader("user-id", submitType.user_id);
            xhr.setRequestHeader("role-type", submitType.role_type);
            xhr.setRequestHeader("access-token", getAccessToken().token);
        },
        success:function(result, status, xhr){
        }
        ,error:function (e) {
            layerMsg('請求失敗，請稍後再試')
        }