web前端中由SameSite字段引發的悲劇是怎樣的

web前端中由SameSite字段引發的悲劇是怎樣的，相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

 最近，小千早上起來的時候，有同學反映后臺的更新功能失效了，打開之后發現確實后臺顯示報錯，如下圖所示。

      后來排查了一下，發現這次請求確實沒有發cookie信息到后臺

      由于后臺是用session存儲用戶的登錄狀態的，所以如果這里少了cookie信息的話，由于http本身是無狀態的，導致不知道是哪個用戶登錄了，這里就報了ERROR_SESSION這樣的錯誤，苦思冥想之后，各種搜索，突然發現了一點線索，就是這個 SameSite字段搞得怪。

      關于SameSite字段的介紹

      SameSite 是HTTP響應頭 Set-Cookie 的屬性之一。它允許您聲明該Cookie是否僅限于第一方或者同一站點上下文。

      SameSite 接受下面三個值：

      Lax

      Cookies允許與頂級導航一起發送，并將與第三方網站發起的GET請求一起發送。這是瀏覽器中的默認值。

      Strict

      Cookies只會在第一方上下文中發送，不會與第三方網站發起的請求一起發送。

      None

      Cookie將在所有上下文中發送，即允許跨域發送。

      注意：以前 None 是默認值，但最近的瀏覽器版本將 Lax 作為默認值，以便對某些類型的跨站請求偽造 （CSRF） ***具有相當強的防御能力。

      問題解決

      由于更新接口這里的請求方式是 post,然后現在chrome瀏覽器里面的SameSite字段的默認值是Lax，導致cookie信息沒有被發送到后臺去，經過一輪搜索之后，發現要添加以下內容，才能完整解決這個問題

      由于我們現在后臺的請求庫是 axios,所以要在 axios這里添加一個配置項

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

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

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

      然后輸入 SameSite，設置以下三處為 Disabled

      接下來重啟以下瀏覽器，然后再看一下發送的請求，這個時候發現cookie信息已經可以正確發送了，

看完上述內容，你們掌握web前端中由SameSite字段引發的悲劇是怎樣的的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！