Chrome开发者工具中未显示cookie

Question

我正在使用 Node/Express 服务器和 AngularJS 前端。服务器设置了 cookie，网络响应中正确显示，但是在 Chrome 开发者工具的资源选项卡中未显示该 cookie。造成这种情况的可能原因是什么？

- Riyas TK

---

如果cookie的过期时间在过去，Chrome将会默默地删除它。它不会出现在资源选项卡中。 - Tudor Constantin

你的服务器设置了 3 个 cookie：admin，remember 和 sessionID，并且它们都显示在资源选项卡中。你认为哪个 cookie 没有显示？ - Tudor Constantin

Chrome开发者工具中资源选项卡中的cookie未设置。我已经添加了一张图片。 - Riyas TK

尝试设置cookie的Max-age或Expires属性中的一个，而不是两个都设置。我建议只保留Expires属性。 - Tudor Constantin

Answer 1

可能是你的cookie是HTTPOnly验证cookie。除非你正在浏览本地主机，否则它们不会在Chrome中显示。

- Alex Nazarevych

---

有来源吗？我在非本地环境下可以正常查看其他HTTPOnly cookie。 - Alfonso Embid-Desmet

那只是我的观察。然而，看起来Chrome在具有某些特定设置时会显示Cookie。我将我的Web应用程序托管在本地、测试环境和生产环境中，现在我只能在开发工具中看到生产Cookie。与本地和测试不同，生产Cookie具有SameSite=strict属性。 - Alex Nazarevych

这也是我的确切观察。服务器在身份验证后返回带有身份验证令牌的setcookie头。我看到请求和响应都设置了cookie，事实上服务器也看到了cookie，因为它不会重新进行身份验证。但是Chrome和Safari都没有显示该cookie。当我在本地调试localhost时，存储中存在该cookie。 - user2555515

Answer 2

以下是未能设置有效cookie的两个可能原因：

1. 过期时间无效 - 从浏览器的角度来看，cookie在过去就已经过期了。
2. 对于cookie来说，域名无效。假设您的页面是从example.com服务器访问的，但您的服务器试图为google.com域名设置cookie。

Chrome开发工具也可能存在漏洞，无法显示您的cookie信息，但您可以通过向服务器发出另一个请求来检查实际接收到了哪些cookie信息。

- Tudor Constantin

---

把附加的图片检查一下 - Riyas TK

一个有趣的截图是可以看到Chrome显示的请求/响应头。 - Tudor Constantin

目前我正在从本地主机的9000端口请求数据，而Node/Express服务器运行在本地主机的8000端口。这是原因吗？ - Riyas TK

riyas_tk - 可能 - Dan Green-Leipciger

同时，在HTTP浏览器会话中不会接受/保留基于HTTPS定义的Cookie。 - JasonGenX

Answer 3

如果您确定cookie已设置并发送到服务器，但在开发者工具的cookies pane中并不总是看到它，请检查浏览器中当前URL的主机和路径是否匹配。一种可能不总是适合的选择是在cookie中显式设置Path=/，以匹配所有URL。

详细信息

当您打开开发人员控制台浏览您的网站时，cookies窗格将仅显示与URL中当前主机和路径匹配的cookie。例如，如果您为subdomain.example.com设置了cookie，但当前位于example.com，则subdomain.example.com的cookie将不会出现，即使它当前已设置。导航到subdomain.example.com，您现在应该在控制台中看到它。

同样的，假设您的Node应用程序在example.com/api上没有设置cookie中的Path，并且它自动设置为Path=/api。只有当您浏览到以example.com/api/开头的页面时，这将仅在控制台上可见。尽管由于URL中的路径不同，控制台上看不到cookie，但在同一页面中向example.com/api发送请求的JavaScript代码自然会包括此cookie。

您可以在站点信息弹出窗口中查看所有cookie的域和路径。通常是通过点击URL左侧的图标（例如，如果是HTTPS，则是一个挂锁）来完成的。在cookie部分下，您可以看到类似于Opera下面的图片框的盒子，与其他浏览器类似。

请注意所选 cookie 的路径和域名。

潜在解决方案：

在 cookie 中明确设置 Path=/。根据 Set-Cookie MDN documentation 中的说明，Path=<path-value>：

指示必须在请求的 URL 中存在的路径，以便浏览器发送 Cookie 标头。

正斜杠 (/) 字符被解释为目录分隔符，并且子目录也会匹配。例如，对于 Path=/docs，

- 请求路径 /docs、/docs/、/docs/Web/ 和 /docs/Web/HTTP 都将匹配。 - 请求路径 /、/docsets、/fr/docs 将不匹配。

上述引文中隐含的是，使用 Path=/ 将匹配给定域中的所有 URL。在采取此方法之前，您应该确定它是否适用于您特定的用例场景。

- Nagev

---

太好了！在我的情况下，UI 是从 domain1 加载的，但 API 托管在 domain2 上。同样的问题，cookie 在应用程序选项卡中不会显示出来。当我打开第二个浏览器选项卡并只选择 API 的任何 GET 端点并导航到它时，httpOnly cookie 就会显示出来。实际上，您可能甚至不需要指定 API 的有效 GET 端点。对于 domain2 的任何 URL 都可能会看到该域的 cookie，即使是导致 404 的 URL。 - Christoph

非常感谢您展示了在这个额外的模态中也可以看到cookies。谢谢！ - simply good