authentication - 为跨源请求设置cookie

Question

如何跨源共享cookie？更具体地说，如何将 Set-Cookie header 与 Access-Control-Allow-Origin header 结合使用？

这是我的情况的解释:

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

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

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

此外，当我使用 Chrome 开发者工具的“网络”选项卡检查流量时，我可以在“响应 Cookie”下看到 Cookie。然而，我看不到在“存储/Cookies”下的“应用程序”选项卡中设置的 cookie。我没有看到任何 CORS 错误，因此我认为我还遗漏了其他内容。

有什么建议吗？

更新我:

我在 React-Redux 应用程序中使用 request 模块向服务器上的 /signin 端点发出请求。对于服务器我使用express。

express 服务器:

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})

更新二:

我现在正在疯狂地设置请求和响应 header ，确保它们都出现在请求和响应中。下面是一个屏幕截图。请注意 header Access-Control-Allow-Credentials、Access-Control-Allow-Headers、Access-Control-Allow-Methods 和 >访问控制允许来源。看看我在 Axios's github 发现的问题，我的印象是所有必需的 header 现在都已设置。然而，仍然没有运气......

Answer 1

跨站点方法

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

后端(服务器)HTTP header 设置:

• 设置 HTTP header Access-Control-Allow-Credentials 值为 true .

• 确保 HTTP header Access-Control-Allow-Origin 和 Access-Control-Allow-Headers 已设置。不要使用通配符 * 。当您设置允许的来源时，请确保使用包括方案在内的整个来源，即 http 与 CORS 中的 https 不同。

有关在 Express js 中设置 CORS 的更多信息 read the docs here .

Cookie 设置:2021 年 Chrome 和 Firefox 更新的 Cookie 设置:

• SameSite=None
• Secure

做SameSite=None时，设置Secure是一个要求。请参阅 SameSite 上的文档并根据 Secure 的要求。另请注意，Chrome 开发工具现在改进了“网络”选项卡和“应用程序”选项卡中 cookie 问题的过滤和突出显示。

前端(客户端):设置 XMLHttpRequest.withCredentials 标记为true ，这可以通过不同的方式实现，具体取决于所使用的请求响应库:

• ES6 fetch()这是 HTTP 的首选方法。使用credentials: 'include' .

• jQuery 1.5.1出于遗留目的而提及。使用xhrFields: { withCredentials: true } .

• axios作为流行的 NPM 库的示例。使用withCredentials: true .

代理方法

完全避免进行跨站点 (CORS) 操作。您可以通过代理来实现此目的。只需将所有流量发送到同一顶级域名并使用 DNS(子域)和/或负载平衡进行路由。对于 Nginx，这是相对较少的工作。

这种方法与 JAMStack 完美结合。 JAMStack 要求 API 和 Webapp 代码在设计上完全解耦。越来越多的用户阻止第 3 方 cookie。如果 API 和 Web 应用程序可以轻松地在同一主机上提供服务，则第 3 方问题(跨站点/CORS)就会消失。了解 JAMStack here或here .

旁注

事实证明，如果域包含端口，Chrome 将不会设置 cookie。将其设置为 localhost (没有端口)不是问题。非常感谢Erwin对于这个提示!