Nginx之——解決跨域問題
阿新 • • 發佈:2019-01-07
這裡,我們利用Nginx的反向代理功能解決跨域問題,至於,什麼是Nginx的反向代理,大家就請自行百度或者谷歌吧。
nginx作為反向代理伺服器,就是把http請求轉發到另一個或者一些伺服器上。通過把本地一個url字首對映到要跨域訪問的web伺服器上,就可以實現跨域訪問。對於瀏覽器來說,訪問的就是同源伺服器上的一個url。而nginx通過檢測url字首,把http請求轉發到後面真實的物理伺服器。並通過rewrite命令把字首再去掉。這樣真實的伺服器就可以正確處理請求,並且並不知道這個請求是來自代理伺服器的。
具體解決方案如下:
在nginx.conf中編輯
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.lyz.com; } }
然後我把專案部署在nginx的html根目錄下,在ajax呼叫時設定url從http://www.lyz.com/apistest/test變為/apis/apistest/test然後成功解決。
比如我之前請求的Ajax如下:
$.ajax({ type:"post", dataType: "json", data:{'parameter':JSON.stringify(data)}, url:"http://www.lyz.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:"/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('請求失敗,請稍後再試') } });
至此,問題解決。