存在 Cookie 标头，但 Cookie 未存储在浏览器中答案

【问题标题】：Cookies headers are present but Cookies are not stored in browser存在 Cookie 标头，但 Cookie 未存储在浏览器中
【发布时间】：2020-05-05 14:12:27
【问题描述】：

请帮我弄清楚为什么浏览器（Chrome 和任何其他浏览器）不设置 cookie，而响应标头中存在 Set-Cookie 标头：

Access-Control-Allow-Origin: *
Connection: keep-alive
Content-Length: 345
Content-Type: application/json; charset=utf-8
Date: Sat, 18 Jan 2020 21:15:53 GMT
ETag: W/"159-UXuykOchcveuYBb7xZpN5Luf3jU"
Set-Cookie: jwt=************; Path=/; Expires=Fri, 17 Apr 2020 21:15:53 GMT; HttpOnly
Strict-Transport-Security: max-age=15552000; includeSubDomains
X-Content-Type-Options: nosniff
X-DNS-Prefetch-Control: off
X-Download-Options: noopen
X-Frame-Options: SAMEORIGIN
X-XSS-Protection: 1; mode=block

我的应用运行在：http://localhost:8080

【问题讨论】：

你是如何确定没有设置cookie的？
应用程序 --> localhost:8080 的 Cookie 为空
我仍然不确定应用程序 --> Cookies 在哪里？而且，我希望您知道 cookie 仅由主机存储，没有端口。
我看不出 cookie 有什么明显的问题。您是否确认它没有在后续请求中发送回主机？您只需查看 Chrome 调试器的“网络”选项卡，即可查看在另一个请求中发送到同一主机的内容。
我认为我的问题是我在localhost:8080 上有客户端应用程序，在localhost:3000 上有服务器端应用程序。如果只使用localhost:3000，浏览器会存储 cookie。但是有趣的是，如果使用 Postman 发送请求时使用 localhost:8080，则一切都可以，但不适用于 localhost:8080 它不起作用，它会获取 Set-Cookie 标头，但不要将 cookie 存储在浏览器中

标签： javascript express vue.js cookies

【解决方案1】：

您似乎在使用 CORS。

要使用 CORS 设置 cookie，您需要在发出请求时设置 withCredentials 标志。

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials

服务器需要返回标头Access-Control-Allow-Credentials: true。您还需要更改 Access-Control-Allow-Origin: *，因为您不能在使用凭据的请求中使用通配符。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Credentials
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin

从 Chrome 80 开始，您还需要在 cookie 上设置 SameSite=None 和 Secure 指令。

https://www.chromestatus.com/feature/5088147346030592
https://www.chromestatus.com/feature/5633521622188032
https://www.troyhunt.com/promiscuous-cookies-and-their-impending-death-via-the-samesite-policy/

要检查是否设置了 cookie，您不能简单地打开 Application > Cookies 来检查 cookie。 cookie 将设置为 localhost:3000，因此查看 localhost:8080 的 cookie 不会显示它。相反，您需要打开另一个指向 localhost:3000 的选项卡，然后查看其中的 Application > Cookies。 Cookie 在选项卡之间共享，因此您仍然可以看到原始 localhost:8080 选项卡设置的 Cookie。

让跨域 cookie 与 Safari 一起工作是另一回事。如果您需要支持 Safari，我建议您对此进行一些研究，因为您可能需要完全采用不同的策略。

【讨论】：

为什么 cookie 会设置为 3000 端口？ Access-Control-Allow-Origin 应该是 localhost:8080 然后 cookie 将在端口 8080 中找到