常用的跨域請求的解決方案

瀏覽器出於安全問題的考慮，採用了同源策略：不能獲取其他網域名稱（包括埠）下面資源的限制 。

（1） cookie、localstorage 和 indexdb 無法讀取。

（2） dom 無法獲得。

（3） ajax 請求不能傳送。（比如執行在127.0.0.1:80的web服務想要通過ajax來獲取127.0.0.1:8090的資料）

實際上，跨域請求的檢查和攔截者是瀏覽器。

常用解決方案：

1. 簡單請求：

瀏覽器預設在請求頭資訊中增加origin欄位，跨域後的伺服器根據這個值決定是否同意這次請求：

伺服器不同意：返回乙個正常的http回應，不包含access-control-allow-origin（注意：狀態碼可能依舊為200）；

access-control-allow-origin: http://*** (要麼是origin欄位的值，要麼是*表示接收任意網域名稱)

access-control-allow-credentials: true
access-control-expose-headers: foobar

請求帶cookies和http認證資訊需要：

前端：ajax請求時設定xmlhttprequest物件的withcredentials屬性為true；

後端：返回請求頭中新增 access-control-allow-credentials: true

傳送options請求：

origin:

access-control-request-method: put等

access-control-request-headers: x-***-header

伺服器允許時的返回：

access-control-allow-origin:

access-control-allow-methods: get, post, put

access-control-allow-headers: x-custom-header

伺服器拒絕時的返回：

會返回乙個正常的http回應，但是沒有任何cors相關的頭資訊字段

注意：對於附帶身份憑證的請求，伺服器不得設定access-control-allow-origin的值為「*」。即：傳送請求時的xmlhttprequest物件的withcredentials屬性設為true，瀏覽器期望在請求時攜帶cookie資訊，這時候伺服器如果access-control-allow-origin:*，也被判斷為預檢請求失敗。參考下圖：

將請求url動態拼接成引用外部js檔案的方式。

比如通過webpack-dev-server（使用的是http-proxy-middleware）實現跨域**，參考這篇：

如果是開發除錯環境，還可以採用關閉chrome瀏覽器同源策略的方式來暫時方便開發（這時候瀏覽器不檢查是否跨域，也不會傳送預檢請求）。

「--disable-web-security --user-data-dir"

以後開啟的chrome瀏覽器會彈出以下提示，忽略即可

JS跨域請求的解決方案

這裡說的 js 跨域是指通過 js 在不同的域之間進行資料傳輸或通訊，比如用 ajax 向乙個不同的域請求資料，或者通過 js 獲取頁面中不同域的框架中 iframe 的資料。只要協議 網域名稱 埠有任何乙個不同，都被當作是不同的域。修改 page web 的 itemcontroller.js 引...

跨域請求解決方案

1.什麼叫js跨域請求 js跨域是指通過js在不同的域之間進行資料傳輸或通訊，比如用ajax向乙個不同的域請求資料，或者通過js獲取頁面中不同域的框架中 iframe 的資料。什麼是不同的域 只要協議 網域名稱 埠有任何乙個不同，都被當作是不同的域。2.下面貼上一段請求 這用的是angularjs編...

跨域請求解決方案

在前端開發過程中，難免和服務端產生資料互動。一般情況我們的請求分為這麼幾種情況 只關注傳送，不關注接收 不僅要傳送，還要關注服務端返回的資訊 上面提到了乙個概念，我們這裡簡單做一下講解。什麼叫做跨域？一般情況下，跨域分為三種情況 跨協議 跨子域 跨網域名稱。下面距離梳理一下這三種情況。我們需要知道的...