Chrome中开发者工具可见Cookie，但document.cookie返回空的原因

这种情况我碰到过好多次，大概率是Cookie的属性限制了JavaScript的访问，下面是几个最常见的原因：

1. Cookie设置了HttpOnly属性 #

这是最常见的原因！当服务器在设置Cookie时加上了HttpOnly标记，浏览器会严格限制JavaScript（包括document.cookie）读取或修改这个Cookie，它只能在HTTP/HTTPS请求中被自动携带，目的是防止XSS攻击窃取Cookie。

你可以在Application面板里查看这个Cookie的详情，看看有没有HttpOnly的勾选标记——如果有，那document.cookie肯定拿不到它。

2. Cookie的Path属性与当前页面路径不匹配 #

Cookie的Path属性定义了它能被哪些路径的页面访问。比如：

• 如果Cookie的Path设置为/dashboard，而你当前页面在根路径/，那么document.cookie就无法读取这个Cookie，但它会显示在Application面板的对应URL下。
• 只有当当前页面的路径包含Cookie的Path时，JS才能访问到它。

3. Cookie设置了Secure属性但当前页面是HTTP协议 #

如果Cookie带有Secure标记，那么它只能在HTTPS环境下被访问。如果你当前页面是HTTP协议（即使是localhost），document.cookie也无法读取到这个Cookie，但它依然会出现在Application面板里。

4. 跨源隔离（Cross-Origin Isolation）限制 #

如果网站开启了跨源隔离（通过设置Cross-Origin-Opener-Policy和Cross-Origin-Embedder-Policy响应头），可能会限制某些跨源Cookie的访问，但这种情况相对少见，通常会伴随其他跨源相关的问题。

快速验证方法 #

你可以在Application面板里逐个检查Cookie的属性：

• 查看是否有HttpOnly勾选
• 核对Path是否和当前页面路径匹配
• 确认当前协议是否和Secure属性要求一致

内容的提问来源于stack exchange，提问作者Andrew