为交叉源请求设置Cookie

Question

如何分享Cookie交叉起源？更具体地说，如何将set-cookie头与access-control-allow-origin头结合使用？

下面是对我的情况的解释：

我正在尝试为运行在localhost:3000上的web应用程序中的localhost:4000上的API设置cookie。

似乎我在浏览器中收到了正确的响应头，但不幸的是它们没有效果。这些是响应头：

HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://localhost:3000
Vary: Origin, Accept-Encoding
Set-Cookie: token=0d522ba17e130d6d19eb9c25b7ac58387b798639f81ffe75bd449afbc3cc715d6b038e426adeac3316f0511dc7fae3f7; Max-Age=86400; Domain=localhost:4000; Path=/; Expires=Tue, 19 Sep 2017 21:11:36 GMT; HttpOnly
Content-Type: application/json; charset=utf-8
Content-Length: 180
ETag: W/"b4-VNrmF4xNeHGeLrGehNZTQNwAaUQ"
Date: Mon, 18 Sep 2017 21:11:36 GMT
Connection: keep-alive

此外，当我使用Chrome开发人员工具的Network选项卡检查流量时，我可以在响应cookies下看到cookie。但是，我看不到在storage/cookies下的Application选项卡中设置了cookie。我没有看到任何CORS错误，所以我想我遗漏了一些其他的东西。

有什么建议吗？

res.cookie('token', 'xxx-xxx-xxx', { maxAge: 86400000, httpOnly: true, domain: 'localhost:3000' })

浏览器中得请求：

request.post({ uri: '/signin', json: { userName: 'userOne', password: '123456'}}, (err, response, body) => {
    // doing stuff
})

我现在正在疯狂地设置请求和响应头，确保它们同时存在于请求和响应中。下面是一个截图。请注意标头access-control-allow-credentials、access-control-allow-headers、access-control-allow-methods和access-control-allow-origin。看看我在Axios的github上发现的问题，我的印象是所有必需的头都已经设置好了。但是，还是没有运气...

Answer 1

要允许通过CORS请求成功接收和发送cookie，请执行以下操作。

后端（服务器）：将HTTP头access-control-allow-credentials值设置为true。此外，请确保设置了HTTP头access-control-allow-origin和access-control-allow-headers并且没有使用通配符*。

2021年Chrome和Firefox更新时推荐的Cookie设置:samesite=none和secure。请参阅MDN文档

有关在express js中设置CORS的更多信息，请阅读此处的文档

前端（客户端）：将XMLHttpRequest.WithCredentials标志设置为True，根据使用的请求-响应库，可以通过不同的方式实现：

>

jQuery 1.5.1XHRFields：{WithCredentials：true}

ES6 fetch()凭据：“include”

Axios:WithCredentials:true

如果你不管出于什么原因不回避它。解决办法在上面。

结果发现，如果域包含端口，Chrome不会设置cookie。为localhost（没有端口）设置它不是问题。非常感谢欧文的这个提示！