web前端中由SameSite字段引發(fā)的悲劇是怎樣的，相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

創(chuàng)新互聯(lián)主要從事網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)息縣,十年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來(lái)電咨詢建站服務(wù):18980820575

 最近，小千早上起來(lái)的時(shí)候，有同學(xué)反映后臺(tái)的更新功能失效了，打開(kāi)之后發(fā)現(xiàn)確實(shí)后臺(tái)顯示報(bào)錯(cuò)，如下圖所示。

      后來(lái)排查了一下，發(fā)現(xiàn)這次請(qǐng)求確實(shí)沒(méi)有發(fā)cookie信息到后臺(tái)

      由于后臺(tái)是用session存儲(chǔ)用戶的登錄狀態(tài)的，所以如果這里少了cookie信息的話，由于http本身是無(wú)狀態(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)的防御能力。

      問(wèn)題解決

      由于更新接口這里的請(qǐng)求方式是 post,然后現(xiàn)在chrome瀏覽器里面的SameSite字段的默認(rèn)值是Lax，導(dǎo)致cookie信息沒(méi)有被發(fā)送到后臺(tái)去，經(jīng)過(guò)一輪搜索之后，發(fā)現(xiàn)要添加以下內(nèi)容，才能完整解決這個(gè)問(wèn)題

      由于我們現(xiàn)在后臺(tái)的請(qǐng)求庫(kù)是 axios,所以要在 axios這里添加一個(gè)配置項(xiàng)

      axios.defaults.withCredentials = true;//允許跨域攜帶cookie信息http://www.changhai120.com/     

      再修改一下chrome瀏覽器中SameSite字段的設(shè)置，具體步驟如下所示：

      在地址欄輸入，chrome://flags

      然后輸入 SameSite，設(shè)置以下三處為 Disabled

      接下來(lái)重啟以下瀏覽器，然后再看一下發(fā)送的請(qǐng)求，這個(gè)時(shí)候發(fā)現(xiàn)cookie信息已經(jīng)可以正確發(fā)送了，

看完上述內(nèi)容，你們掌握web前端中由SameSite字段引發(fā)的悲劇是怎樣的的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！