問題

vue項目，本地開發本來好好的，瀏覽器升級后，突然就不行了。連頁面都沒渲染到app上，白屏了，如下：

雖然本地開發無法加載頁面了，但是npm run build后打包發布的代碼，瀏覽器可以正常訪問，完全沒問題。

項目登錄認證頁面，是公司另外部門封裝的一個統一認證頁面，短期是無法通過代碼層面解決問題的，所以看看瀏覽器更新后，發生了什么，看看能不能解決了。

尋因

在開發者工具的Network里，找到登錄認證的幾個請求接口，發現有2個關鍵的接口，都返回了如下信息：

Failed to load response data: No resource with given identifier found

接口無返回認證信息，導致渲染頁面的流程也走不下去了，造成了頁面渲染失敗，白屏。

再看看控制臺打印，發現Console里面有了新的告警，如下：

由于 Cookie “JSESSIONID”缺少“SameSite”屬性，且該屬性的默認值為“SameSite=Lax”，已將“SameSite”的策略設為“Lax”。

由于 Cookie “”缺少“SameSite”屬性，且該屬性的默認值為“SameSite=Lax”，已將“SameSite”的策略設為“Lax”。

SameSite是 Chrome 51 版本后添加的一個屬性，用來防止 CSRF 攻擊和用戶追蹤（相關資料）。

SameSite有3個屬性：

• Strict 最為嚴格，完全禁止第三方Cookie，跨站點時，任何情況下都不會發送Cookie。只有當前網頁URL與請求目標URL完全一致才會帶上Cookie。

• Lax 規則稍稍放寬，大多數情況也是不發送第三方Cookie，但是導航到目標網址的 Get 請求除外。

• None 網站可以選擇顯式關閉SameSite屬性，將其設為None。不過，前提是必須同時設置Secure屬性（Cookie 只能通過 HTTPS 協議發送），否則無效。

通過以上信息，知道，更新后的瀏覽器，安全要求，接口報文里面的set-cookie要設置SameSite屬性，默認將沒有設置SameSite的請求設置為SameSite=Lax。

項目認證接口，在本地開發的情況下，是跨站點&跨域 Get 請求，接口沒有設置SameSite屬性，在瀏覽器默認設置SameSite=Lax的情況下，導致請求沒帶上Cookie，認證失敗，接口不會返回數據，導致了接口Failed to load response data的問題。

發布生產時，認證接口是同源&同站點 Get 請求，就沒問題了。

解決方案

1、Chrome 51版本后91版本前

運行本地項目調試時，某些接口需要使用cookie來校驗，會涉及到cookie跨域丟失問題。對于前端來說，調試項目時想要實現瀏覽器跨域共享cookie，可以設置瀏覽器的實驗屬性，關閉瀏覽器的安全設置，操作如下：

• 在Chrome地址欄輸入chrome://flags
• 把SameSite by default cookies、Cookies without SameSite must be secure 設置成Disabled

• 重啟瀏覽器生效

2、Chrome 91版本后

Chrome 91 版本后，Chrome實驗屬性 SameSite by default cookies、Cookies without SameSite must be secure 的設置消失了。臨時解決辦法就是安裝舊版本的Chrome，因為本人是Mac下開發，只分享下Mac下安裝舊版本瀏覽器的辦法。

Mac下谷歌瀏覽器穩定版、dev版的舊版不能和新版共存，如果更新了最新瀏覽器，又不想降版本的，可以下載谷歌瀏覽器canary版（可以和穩定版、dev版共存），各版本下載地址，選擇91前的版本，然后照著 [1]的操作設置下就ok了。

3、接口設置SameSite=none

服務端將 response 的 header 設置Set-Cookie:SameSite=None，允許跨站請求發送 Cookie。

Set-cookie: key=value; SameSite=None; Secure

• 注意1：接口必須是https
• 注意2：需要 UA 檢測，部分瀏覽器不能加 SameSite=none

IOS 12的 Safari 以及老版本的一些 Chrome 會把 SameSite=none 識別成 SameSite=Strict，所以服務端必須在下發 Set-Cookie 響應頭時進行 User-Agent 檢測，對這些瀏覽器不下發SameSite=none屬性

4、用火狐

不知道Windows下什么情況，反正Mac很幸運的，在升級 96 版本后也不行了。

總結

當接口依賴Cookie時，前端不發送Cookie，會造成接口不返回數據的問題。也就是文章開頭的
Failed to load response data: No resource with given identifier found問題。

瀏覽器對前端安全和用戶隱私越來越重視了，現在是瀏覽器默認策略倒逼接口安全升級了。

一些通用服務接口，最好是服務端設置解決了。不然第三方開發過程中，遇到本文所述問題，真的很無語的，說是前端的問題也行，說不是前端的問題，貌似也沒錯。隨著瀏覽器安全策略的不斷更新，服務端接口的安全策略也要隨著更新了，特別是一些不需要收集用戶信息、不搞廣告的項目，生產環境嚴格執行SameSite的安全策略其實也沒啥問題的，反而更好。供第三方開發時，說明下注意的設置就好了。

參考資料

• 1、Chrome瀏覽器改變SameSite設置

• 2、【Cookie 的 SameSite 屬性】當Chrome版本升級后三方Cookie被禁用

• 3、預測最近面試會考 Cookie 的 SameSite 屬性