前兩天面試問到了跨域問題,答得不是很好,所以總結一下跨域問題。
1.產生原因
由以下三個條件同時滿足時,纔會產生跨域問題。
- 瀏覽器限制
瀏覽器處於安全的考慮會對請求做校驗,校驗不通過就會報跨域的問題。
Access to XMLHttpRequest at 'XXX' from origin 'XXXX' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
- 跨域
請求的地址和本域的協議、域名、端口有一個不一致就爲跨域。
- XHR(XMLHttpRequest)請求
發出去的請求爲XHR請求。像圖片、CSS、JS等請求不會產生跨域問題,就是因爲他們的請求不是XHR格式的。
2.解決辦法
- 禁止瀏覽器檢查
chrome.exe–disable-web-security -user-data-dir=e:\forbidden-check
(-user-data-dir= e:\forbidden-check 表示瀏覽器禁止安全檢查的臨時存放數據目錄)
不建議這樣設置,而且也沒法讓所有用戶都這樣設置。
- 使用JSONP
JSONP是在客戶端生成<script></script>標籤,發送type爲script格式的請求,這樣就不會產生跨域問題。
不建議這樣使用,因爲要修改服務端代碼。
- 修改被調用方的應用服務器(例如Tomcat)或者web服務器(例如Nginx、Apache)
在響應頭中添加以下內容:
Access-Control-Allow-Origin:*
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER
Access-Control-Max-Age:3600
Access-Control-Allow-Credentials:true
不建議這樣設置,因爲需要修改被調用方的配置,如果就是想抓取別人網站上的數據,那就沒法讓被調用方修改。
- 調用方使用反向代理
請求本域的地址,然後通過反向代理請求別人的接口,這樣可以解決跨域的問題。
在Nginx中通過proxy_pass 來反向代理請求別人的接口。
以上內容參考慕課網課程:https://www.imooc.com/video/16571