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

RaoMeng發表於2018-11-27
React跨域Session

這篇文章主要給大家介紹了關於React如何解決fetch跨域請求時session失效問題的相關資料，文中透過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

前言

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

Fetch 的核心在於對 HTTP 介面的抽象，包括 Request，Response，Headers，Body，以及用於初始化非同步請求的 global fetch。得益於 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跨域請求介面的時候，一般都是讓後臺介面在返回頭裡新增

  1. //允許所有域名的指令碼訪問該資源
  2. header("Access-Control-Allow-Origin: *");

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

fetch新增Cookie驗證的方法是設定credentials: 'include'

  1. fetch(url, {
  2.   method: 'POST',
  3.   body: JSON.stringify(params),
  4.   mode: 'cors',
  5.   //請求時新增Cookie
  6.   credentials: 'include',
  7.   headers: new Headers({
  8.    'Accept': 'application/json',
  9.    "Content-Type": "application/x-www-form-urlencoded; charset=utf-8",
  10.   })
  11.  })

設定好了之後，信心滿滿的發起請求。卻發現網路請求報錯了

A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' header when the credentials flag is true. Origin 'http://localhost:3000' is therefore not allowed access

解決方法

原因是網路請求需要攜帶Cookie時Access-Control-Allow-Origin是不能設定為*的，這個時候應該要給Access-Control-Allow-Origin指定域名

這樣就可以達到跨域請求的同時傳遞Cookie的目的了

  • 列表專案

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，

相關文章