React如何解決fetch跨域請(qǐng)求時(shí)session失效問題

第React如何解決fetch跨域請(qǐng)求時(shí)session失效問題前言

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

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

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

當(dāng)接收到一個(gè)代表錯(cuò)誤的HTTP狀態(tài)碼時(shí)，從fetch()返回的Promise不會(huì)被標(biāo)記為reject，即使該HTTP響應(yīng)的狀態(tài)碼是404或500。相反，它會(huì)將Promise狀態(tài)標(biāo)記為resolve（但是會(huì)將resolve的返回值的ok屬性設(shè)置為false），僅當(dāng)網(wǎng)絡(luò)故障時(shí)或請(qǐng)求被阻止時(shí)，才會(huì)標(biāo)記為reject。

默認(rèn)情況下,fetch不會(huì)從服務(wù)端發(fā)送或接收任何cookies,如果站點(diǎn)依賴于用戶session，則會(huì)導(dǎo)致未經(jīng)認(rèn)證的請(qǐng)求（要發(fā)送cookies，必須設(shè)置credentials選項(xiàng)）.

發(fā)現(xiàn)問題

在解決fetch跨域請(qǐng)求接口的時(shí)候，一般都是讓后臺(tái)接口在返回頭里添加

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

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

確實(shí)這樣是可以解決跨域請(qǐng)求的問題，但是如果我們要在請(qǐng)求的時(shí)候添加session，那么這樣設(shè)置就會(huì)出現(xiàn)問題了。

fetch添加Cookie驗(yàn)證的方法是設(shè)置credentials:'include'

fetch(url,{

method:'POST',

body:JSON.stringify(params),

mode:'cors',

//請(qǐng)求時(shí)添加Cookie

credentials:'include',

headers:newHeaders({

'Accept':'application/json',

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

})

設(shè)置好了之后，信心滿滿的發(fā)起請(qǐng)求。卻發(fā)現(xiàn)網(wǎng)絡(luò)請(qǐng)求報(bào)錯(cuò)了

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

解決方法

原因是網(wǎng)絡(luò)請(qǐng)求需要攜帶Cookie時(shí)Access-Control-Allow-Origin是不能設(shè)置為*的，這個(gè)時(shí)候應(yīng)該要給Acces