Nginx解決跨域問題
阿新 • • 發佈:2020-10-20
為何會跨域?
出於瀏覽器的同源策略限制。同源策略(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('請求失敗,請稍後再試')
}
});