【Nginx】使用Nginx如何解決跨域問題？看完這篇原來很簡單！！

冰河團隊發表於2020-07-20
Nginx跨域

寫在前面

當今網際網路行業，大部分Web專案基本都是採用的前後端分離模式。前端為H5專案，後端為Java、PHP、Python等專案。而且大部分後端服務並不會只部署一套服務，而是會採用Nginx對後端服務進行負載均衡。那麼，此時就會出現一個問題了：如果一個請求url的 協議、域名、埠 三者之間任意一個與當前頁面url不同就會產生跨域的現象。那麼如何使用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('請求失敗，請稍後再試')
        }
    });

好了，今天就聊到這兒吧！別忘了點個贊，給個在看和轉發，讓更多的人看到，一起學習，一起進步！！

寫在最後

如果你覺得冰河寫的還不錯，請微信搜尋並關注「 冰河技術 」微信公眾號，跟冰河學習高併發、分散式、微服務、大資料、網際網路和雲原生技術，「 冰河技術 」微信公眾號更新了大量技術專題，每一篇技術文章乾貨滿滿！不少讀者已經通過閱讀「 冰河技術 」微信公眾號文章，吊打面試官，成功跳槽到大廠；也有不少讀者實現了技術上的飛躍，成為公司的技術骨幹！如果你也想像他們一樣提升自己的能力，實現技術能力的飛躍，進大廠，升職加薪，那就關注「 冰河技術 」微信公眾號吧，每天更新超硬核技術乾貨，讓你對如何提升技術能力不再迷茫！

相關文章