最近,小千早上起來的時(shí)候,有同學(xué)反映后臺(tái)的更新功能失效了,打開之后發(fā)現(xiàn)確實(shí)后臺(tái)顯示報(bào)錯(cuò),如下圖所示。
后來排查了一下,發(fā)現(xiàn)這次請(qǐng)求確實(shí)沒有發(fā)cookie信息到后臺(tái)
由于后臺(tái)是用session存儲(chǔ)用戶的登錄狀態(tài)的,所以如果這里少了cookie信息的話,由于http本身是無狀態(tài)的,導(dǎo)致不知道是哪個(gè)用戶登錄了,這里就報(bào)了ERROR_SESSION這樣的錯(cuò)誤,苦思冥想之后,各種搜索,突然發(fā)現(xiàn)了一點(diǎn)線索,就是這個(gè) SameSite字段搞得怪。
關(guān)于SameSite字段的介紹
SameSite 是HTTP響應(yīng)頭 Set-Cookie 的屬性之一。它允許您聲明該Cookie是否僅限于第一方或者同一站點(diǎn)上下文。
SameSite 接受下面三個(gè)值:
Lax
Cookies允許與頂級(jí)導(dǎo)航一起發(fā)送,并將與第三方網(wǎng)站發(fā)起的GET請(qǐng)求一起發(fā)送。這是瀏覽器中的默認(rèn)值。
Strict
Cookies只會(huì)在第一方上下文中發(fā)送,不會(huì)與第三方網(wǎng)站發(fā)起的請(qǐng)求一起發(fā)送。
None
Cookie將在所有上下文中發(fā)送,即允許跨域發(fā)送。
注意:以前 None 是默認(rèn)值,但最近的瀏覽器版本將 Lax 作為默認(rèn)值,以便對(duì)某些類型的跨站請(qǐng)求偽造 (CSRF) 攻擊具有相當(dāng)強(qiáng)的防御能力。
問題解決
由于更新接口這里的請(qǐng)求方式是 post,然后現(xiàn)在chrome瀏覽器里面的SameSite字段的默認(rèn)值是Lax,導(dǎo)致cookie信息沒有被發(fā)送到后臺(tái)去,經(jīng)過一輪搜索之后,發(fā)現(xiàn)要添加以下內(nèi)容,才能完整解決這個(gè)問題
由于我們現(xiàn)在后臺(tái)的請(qǐng)求庫是 axios,所以要在 axios這里添加一個(gè)配置項(xiàng)
axios.defaults.withCredentials = true;//允許跨域攜帶cookie信息
再修改一下chrome瀏覽器中SameSite字段的設(shè)置,具體步驟如下所示:
在地址欄輸入,chrome://flags
然后輸入 SameSite,設(shè)置以下三處為 Disabled
接下來重啟以下瀏覽器,然后再看一下發(fā)送的請(qǐng)求,這個(gè)時(shí)候發(fā)現(xiàn)cookie信息已經(jīng)可以正確發(fā)送了,
問題解決!?。?/p>
最后對(duì)前端開發(fā)感興趣的同學(xué),可以了解一下千鋒教育web前端培訓(xùn)班提供的web前端學(xué)習(xí)路線,包括HTML5、CSS3、JavaScript及其常用的擴(kuò)展庫,能夠讓你對(duì)入門前端開發(fā)有一個(gè)清晰的認(rèn)識(shí),想要獲取前端完整學(xué)習(xí)路線和免費(fèi)的學(xué)習(xí)資料可以添加我們的web前端技術(shù)分享交流qq群:857920838 加群找群管理領(lǐng)取即可,等你來哦~~