[FE] Chrome 跨域请求失败：This Set-Cook

问题

Chrome 更新到 80 以后，本地发起的跨域请求失败了。

This Set-Cookie didn't specify a "SameSite" attribute, was defaulted to "SameSite=Lax", and was blocked because it came from a cross-site response which was not the response to a top-level navigation. This response is considered cross-site because the URL has a different scheme than the current site.

CORS 相关的设置都是好的，

access-control-allow-credentials: true
access-control-allow-origin: http://local.xxx.com:3000  // xxx 是我故意打码的，本例中是本地的访问域名

复制 curl 如下，发现并没有携带 cookie 发送请求，

curl 'https://api.xxx.com/...' \
  -H 'authority: api.xxx.com' \
  -H 'sec-ch-ua: "Google Chrome";v="89", "Chromium";v="89", ";Not A Brand";v="99"' \
  -H 'accept: application/json, text/plain, */*' \
  -H 'sec-ch-ua-mobile: ?0' \
  -H 'user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36' \
  -H 'origin: http://local.xxx.com:3000' \
  -H 'sec-fetch-site: cross-site' \
  -H 'sec-fetch-mode: cors' \
  -H 'sec-fetch-dest: empty' \
  -H 'referer: http://local.xxx.com:3000/' \
  -H 'accept-language: zh-CN,zh;q=0.9' \
  --compressed

查了一下资料发现是 Chrome 80 对 SameSite 为空时的 默认值 设置变更了。

以前 None 是默认值，但最近的浏览器版本将 Lax 作为默认值，
以便对某些类型的跨站请求伪造 （CSRF） 攻击具有相当强的防御能力。

方案

打开 Chrome，设置 SameSite by default cookies 为 Disabled，然后 重启 Chrome 就好了。

chrome://flags/#same-site-by-default-cookies

参考

MDN: SameSite cookies
MDN: CORS
MDN: CSRF