CORS Cookie 未在跨域上设置，使用 fetch，设置凭据：'include' 和 origins 已设置

Question

我正在使用 fetch 向后端发出请求。当我使用不同的域时，cookie 未设置。当我使用相同的域时设置了 cookie。

为什么没有设置？

我修改了我的 /etc/hosts 文件以使用假名来测试使用相同和不同的域，并确保它们也没有被浏览器列入黑名单。

如果我local-test-frontend.com同时用于浏览器和服务器域，它可以工作，但如果我将后端 url 更改为local-test-backend.com它会失败。

*请注意，我测试的前端网址是 * http://local-test-frontend.com:3000/login

Javascript

    fetch('http://local-test-backend.com/login',  {
        mode: 'cors',
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(loginRequest),
        credentials: 'include'
    }).then(// Other code here.....

服务器响应头

Access-Control-Allow-Credentials    
true
Access-Control-Allow-Origin 
http://local-test-frontend.com:3000
Content-Length  
103
Content-Type    
application/json
Date    
Wed, 10 Jul 2019 07:23:49 GMT
Server  
Werkzeug/0.15.1 Python/3.7.3
Set-Cookie  
MY_TOKEN=a7b8ad50f19…end.com; Path=/; SameSite=Lax

Answer 1

截至 2021 年，在 Linux 上使用 Edge 90.0.796.0，我设法使用以下方法设置 CORS cookie：

1. 客户端异步初始化一个获取请求credentials: 'include'。请参阅此处了解更多详情。
2. 要做 CORS，服务器响应头必须包含Access-Control-Allow-Origin明确设置为一个域，可以不同于服务器域。例如，在单页应用架构中，您的前端站点临时托管在 localhost:3000，而您的后端服务器托管在 localhost:8000，那么标题应该是Access-Control-Allow-Origin: http://localhost:3000. 请参阅此处和此处。
3. 为了允许客户端处理 cookie，这显然是一种敏感资源，服务器响应头必须进一步包含Access-Control-Allow-Credentials: true. 见这里。请注意，这对 强制执行非通配符设置Access-Control-Allow-Origin。看这里- 这就是为什么在上面的第 2 点中，它必须被显式设置为类似http://localhost:3000而不是*
4. 当服务器设置 cookie 时，它​​必须包含SameSite=None; Secure; HttpOnly. 所以总的来说就像Set-Cookie: session_id=12345; SameSite=None; Secure; HttpOnly. 在最新的浏览器中SameSite似乎是一个相对较新的要求，并且必须Secure在SameSite设置为时一起使用None。
5. 关于HttpOnly，我还没有找到相关资料，但是在我的实验中，省略它会导致浏览器忽略Set-Cookie标题。
6. 对后端服务器的进一步请求也必须credentials: 'include'设置。

Answer 2

我只是想通过调用不同域上的服务器来为我当前的域设置 cookie。

你不能，至少不能直接。Cookie 属于设置它们的起源。

最接近的方法是让不同的域以非 Cookie 格式返回数据（例如响应正文），然后使用客户端 JS 使用document.cookie.