CORS跨域解決方案

2022-08-28 21:36:22 字數 1433 閱讀 4788

xhr 2.0z中新增了cors跨域解決方案

何為跨域的情況?

1.不同網域名稱:  如---> a網域名稱請求b網域名稱中的資料

2.不同埠:  如---> 3000埠下請求8000埠下的資料

3.不同協議:  如---> http協議下請求https協議下的資料

cors解決方案?

1. 需要伺服器配合設定響應頭: 如---->  header('access-control-allow-origin: * ');

2. 可選擇是否帶上cookie;

簡單請求和複雜請求的區別?

1. 複雜請求會先傳送一次 options 方法的預檢請求,簡單請求不會

2. 簡單請求需要同時滿足的條件:

1)請求方式必須為head、get、post中的乙個;

2)請求頭中的字段不超過accept ,accept-language ,content-language ,last-event-id ,content-type;

以上三個條件,在請求時,只要有乙個不被滿足,就會被認為是複雜請求;

例如自定義乙個請求頭字段去傳送請求:

function ajax()}}

伺服器端響應頭欄位設定?

1.access-control-allow-origin

1)表示允許訪問的網域名稱

2)必須在響應頭中設定該欄位

3)可使用 * 號表示允許任意網域名稱

2.access-control-allow-credentials

1)值只能設為true,表示允許前端向伺服器傳送cookie;

2)客戶端也需要設定xhr物件的widthcredentials為true,配合伺服器端;

3)access-control-allow-origin必須設定為指定網域名稱,不能為 * 號;

例如(在跨域的情況下,客戶端與伺服器端溝通cookie):

document.cookie = 'name=client;'   //設定cookie的值

function ajax()}}

此時服務端需要設定: 1)access-control-allow-credentials 為true;

2)access-control-allow-origin 只能指定乙個網域名稱

3)還需要設定相應cookie的值

注意,此時的ajax請求,前端所接收到的cookie值並不是自己設定的那個,而是伺服器給響應的值;

3.access-control-expose-headers

1)表示允許客戶通過getresponseheader方法獲取的字段;

2)cors方式下該方法預設只能獲取6個基礎字段;分別是: cache-control / content-language / content-type / expires / last-modified / pragma

CORS跨域解決方案

這裡說的js跨域是指通過js在不同的域之間進行資料傳輸或通訊,比如用ajax向乙個不同的域請求資料,或者通過js獲取頁面中不同域的框架中 iframe 的資料。只要協議 網域名稱 埠有任何乙個不同,都被當作是不同的域。cors允許瀏覽器向跨源伺服器,發出xmlhttprequest請求,從而克服了a...

跨域解決方案CORS

cors 需要瀏覽器和後端同時支援。ie 8 和 9 需要通過 xdomainrequest 來實現。瀏覽器會自動進行 cors 通訊,實現 cors 通訊的關鍵是後端。只要後端實現了 cors,就實現了跨域。服務端設定 access control allow origin 就可以開啟 cors。...

跨域解決方案CORS

js跨域請求 這裡說的js跨域是指通過js在不同的域之間進行資料傳輸或通訊,比如用ajax向乙個不同的域請求資料,或者通過js獲取頁面中不同域的框架中 iframe 的資料。只要協議 網域名稱 埠有任何乙個不同,都被當作是不同的域。一句話,說明白跨域 跨域,指的是瀏覽器不能執行其他 的指令碼。它是由...