React如何解決fetch跨域請求時session失效問題_第1頁
React如何解決fetch跨域請求時session失效問題_第2頁
React如何解決fetch跨域請求時session失效問題_第3頁
全文預覽已結束

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

第React如何解決fetch跨域請求時session失效問題前言

fetch在reactjs中等同于XMLHttpRequest，它提供了許多與XMLHttpRequest相同的功能，但被設計成更具可擴展性和高效性。

Fetch的核心在于對HTTP接口的抽象，包括Request，Response，Headers，Body，以及用于初始化異步請求的globalfetch。得益于JavaScript實現的這些抽象好的HTTP模塊，其他接口能夠很方便的使用這些功能；除此之外，Fetch還利用到了請求的異步特性——它是基于Promise的。

請注意，fetch規范與jQuery.ajax()主要有兩種方式的不同，牢記：

當接收到一個代表錯誤的HTTP狀態碼時，從fetch()返回的Promise不會被標記為reject，即使該HTTP響應的狀態碼是404或500。相反，它會將Promise狀態標記為resolve（但是會將resolve的返回值的ok屬性設置為false），僅當網絡故障時或請求被阻止時，才會標記為reject。

默認情況下,fetch不會從服務端發送或接收任何cookies,如果站點依賴于用戶session，則會導致未經認證的請求（要發送cookies，必須設置credentials選項）.

發現問題

在解決fetch跨域請求接口的時候，一般都是讓后臺接口在返回頭里添加

//允許所有域名的腳本訪問該資源

header("Access-Control-Allow-Origin:*");

確實這樣是可以解決跨域請求的問題，但是如果我們要在請求的時候添加session，那么這樣設置就會出現問題了。

fetch添加Cookie驗證的方法是設置credentials:'include'

fetch(url,{

method:'POST',

body:JSON.stringify(params),

mode:'cors',

//請求時添加Cookie

credentials:'include',

headers:newHeaders({

'Accept':'application/json',

"Content-Type":"application/x-www-form-urlencoded;charset=utf-8",

})

設置好了之后，信心滿滿的發起請求。卻發現網絡請求報錯了

Awildcard'*'cannotbeusedinthe'Access-Control-Allow-Origin'headerwhenthecredentialsflagistrue.Origin'http://localhost:3000'isthereforenotallowedaccess

解決方法

原因是網絡請求需要攜帶Cookie時Access-Control-Allow-Origin是不能設置為*的，這個時候應該要給Acces

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論