技術標籤：前端跨域samesite

背景：

最近遇到了一個跨域無法攜帶 cookie 的問題。即我在前後端設定無誤的情況下跨域，可以正常傳送請求但是無法攜帶 cookie。

最後經過一番搜尋找到了問題的原因，並在此進行記錄一下。

什麼是跨域？

跨域是瀏覽器的一種保護措施。防止一些惡意網站將一些連結以某種形式嵌入在網站中，使用者不經意間點選連結，其實就會向連結傳送了一個請求。如果請求可以隨意攜帶上 cookie ，那就存在了安全問題，比如使用使用者的 cookie 進行一些購物操作等，在使用者不知情的情況下進行惡意操作。
因此瀏覽器限制了不同域名的請求如果沒有設定 CORS 是不接受返回的。而且如果沒有在前端設定 credential 且在後端返回頭設定 access-allow-credential 和 access-control-allow-origin 寫明請求 url， 就不會攜帶 cookie 的。

跨域的常用解決方式

解決跨域最常用的方式是使用 CORS（跨域資源共享）。

後端設定返回頭：

//前端請求不攜帶 cookie：
Access-Control-Allow-Origin: *  
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: Content-Type

//前端請求攜帶 cookie
Access-Control-Allow-Origin: 這裡填寫前端請求具體的url
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-
 
Control-Allow-Headers: Content-Type
Access-control-allow-credentials:true

若要攜帶 cookie，同時需要在前端設定 withCredentials : true

一般這樣設定就可以在不同域名的情況下發送請求並且接收到返回訊息，並且可以攜帶 cookie

無法攜帶 cookie 原因

我雖然前後端都按照上面的配置了，按理說應該會攜帶 cookie。但是沒有攜帶。原因是 chrome 2020年新版本的瀏覽器更改了 cookie 的一個屬性：samesite
以前版本的 samesite 預設值是 none ，即只要配置了上述的 cors 跨域就可以帶上 cookie。但是現在的預設值改成了 lax ，即只能在主域名相同情況下攜帶 cookie

samesite 介紹：
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Set-Cookie/SameSite

解決方法

1. 在 chrome 中輸入 chrome://flags/ 把 samesite 關閉就好了
   

2. 將請求換成 https，然後設定 samesite 為none 且同時 secure 為 true
   為什麼需要 https ，因為設定 secure 只能 https

3. 跨域請求在一個主域名下面