跨域問題描述:
iis網站跨域、nginx 網站跨域 都已配置,訪問接口依然出現跨域問題。
錯誤提示:
ccess to XMLHttpRequest at ‘https://xxx.com/gameapi/preserve/get/status’ from origin ‘https://cdn.xxx.com’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
從上面這個報錯可知,需要在api.xxx.com這個域名下,添加跨域請求來源 。
報錯中看,配置的跨域來源Access-Control-Allow-Origin,value是’*, *',需要檢查這個域名api.xxxx.com的Access-Control-Allow-Origin設置項。
原因分析:
(1)、iis http 響應標頭已配置 Access-Control-Allow-Origin 值為*
(2)、niginx 響應標頭已配置 Access-Control-Allow-Origin 值為*
以上均已配置 Access-Control-Allow-Origin 值為* ,可是為什么還會出現上面那個錯誤呢?
結合資料: https://www.cnblogs.com/hellxz/p/16208188.html 這篇解決類似跨域問題的文章中提到 ,原因是設置了2次重復跨域響應頭問題。
由此,我們可能也是同樣的原因,為了驗證這個問題。
(3)、瀏覽器窗口中,單獨訪問接口 。
果然出現了 兩條 Access-Control-Allow-Origin 值為* 的記錄,如下圖所示:
那根據錯誤就確定了問題的原因就是:Access-Control-Allow-Origin 響應頭重復設置導致跨域設置失敗。
解決方法: 保持跨域頭Access-Control-Allow-Origin只有一個。
第一步,找到項目開發人員,確認是不是代碼中 ,添加了解決跨域的響應頭,回復是確定設置了:
既然代碼已經設置,那就保留代碼中的設置,我們只需要 調整 nginx 及 iis 環境中的 配置即可。
第二步,修改Nginx的配置,如下注釋掉兩行配置并reload
第三步,刪除iis 跨域配置,刪除后如下:
至此,問題得以解決。