跨域問題的梳理

前兩天面試問到了跨域問題,答得不是很好,所以總結一下跨域問題。

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章