這里，我們利用nginx的反向代理功能解決跨域問題，至于，什么是nginx的反向代理，大家就請自行百度或者谷歌吧。
nginx作為反向代理服務器，就是把http請求轉發到另一個或者一些服務器上。通過把本地一個url前綴映射到要跨域訪問的web服務器上，就可以實現跨域訪問。 ? （推薦學習：nginx教程）
對于瀏覽器來說，訪問的就是同源服務器上的一個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('請求失敗，請稍后再試') ????????} ????});
至此，問題解決。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
