javascript - 存在 Cookie header ，但 Cookie 未存储在浏览器中

Question

请帮我弄清楚为什么浏览器(Chrome 和任何其他浏览器)不设置 cookie，而 Set-Cookie header 存在于响应 header 中:

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

Answer 1

您似乎正在使用 CORS。

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

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

服务器将需要返回 header 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 开始，您还需要设置 SameSite=None和 Secure cookie 上的指令。

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，您不能简单地打开 应用 > Cookies 检查cookie。 cookie 将设置为 localhost:3000所以查看 localhost:8080 的 cookie不会显示它。相反，您需要打开另一个指向 localhost:3000 的选项卡。然后看应用 > Cookies 在那里。 Cookie 在选项卡之间共享，因此您仍然可以看到原始 localhost:8080 设置的 Cookie标签。

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