为何使用fetch({credentials: 'include'})跨域请求未携带Cookie？

核心问题出在浏览器对未指定SameSite属性的Cookie的默认处理，以及跨域请求的Cookie规则：

• 现代浏览器（Chrome 80+、Firefox 69+等）会自动将未显式设置SameSite属性的Cookie视为SameSite=Lax。Lax模式的规则是：仅在顶级导航请求（比如用户点击链接跳转页面）中才会携带跨域Cookie，而通过fetch/XHR发起的跨域AJAX请求不属于顶级导航，因此浏览器不会携带这类Cookie。
• 即使你手动将Cookie的SameSite设为None，还必须同时设置Secure属性——因为现代浏览器要求SameSite=None的Cookie必须通过HTTPS传输（即标记为Secure），否则会直接拒绝存储或发送该Cookie。你当前设置的Cookie是非Secure的，所以即使修改SameSite也无法生效。

验证与修正方法 #

如果要让跨域fetch请求携带这个Cookie，你需要在设置Cookie时显式指定SameSite=None和Secure属性：

document.cookie = 'foo=bar; SameSite=None; Secure'

设置完成后，再从bing.com发起带credentials: 'include'的fetch请求，浏览器就会携带该Cookie了。

另外需要注意：SameSite=None仅适用于跨域场景，且必须配合Secure，如果是HTTP站点（非HTTPS），无法使用SameSite=None，浏览器会拒绝这类Cookie。

内容的提问来源于stack exchange，提问作者Joji