javascript - CORS Cookie 未在跨域上设置，使用获取，设置凭据 : 'include' and origins have been set

Question

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

为什么没有设置？

我修改了我的/etc/hosts 文件以使用假名来测试使用相同和不同的域，并确保它们是 not blacklisted by the browser任何一个。

如果我使用 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.....

服务器响应 header

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:

客户端使用 credentials: 'include' 异步初始化获取请求.见 here更多细节。

要执行 CORS，服务器响应 header 必须包含 Access-Control-Allow-Origin明确设置为域，可能与服务器域不同。例如，在单页应用架构中，您的前端站点临时托管在 localhost:3000，而您的后端服务器托管在 localhost:8000，则 header 应为 Access-Control-Allow-Origin: http://localhost:3000 .见 here和 here .

为了让客户端处理显然是敏感资源的cookies，服务器响应头必须进一步包含Access-Control-Allow-Credentials: true .见 here .请注意，这会强制 Access-Control-Allow-Origin 使用非通配符设置。 .见 here - 这就是为什么在上面的第 2 点中，它必须明确设置为 http://localhost:3000而不是 *

当服务器设置 cookie 时，它​​必须包含 SameSite=None; Secure; HttpOnly .所以总体上类似于 Set-Cookie: session_id=12345; SameSite=None; Secure; HttpOnly . SameSite好像是比较new requirement在最新的浏览器中，并且必须与 Secure 一起使用在一起时SameSite设置为 None .

关于HttpOnly ，我没有找到相关资料，但是在我的实验中，省略它会导致浏览器忽略Set-Cookie标题。

对后端服务器的进一步请求也必须有 credentials: 'include'放。