如何在React/JavaScript中访问HTTP响应返回的Cookie

能不能读到这个Cookie，和你用React还是其他前端框架没有关系，核心判断依据是服务端给这个Cookie是否设置了HttpOnly属性：

• 如果Cookie携带了HttpOnly标记，任何运行在页面上下文里的JS代码都无法读取、修改这个Cookie的值。这是浏览器内置的强制安全规则，设计这个属性的初衷就是防范XSS攻击窃取用户认证凭证。你能在Firefox开发者工具网络面板看到它，是因为开发者工具是浏览器系统级的调试入口，权限远高于页面内运行的JS代码，不受该安全规则限制。
  目前绝大多数认证场景的Cookie，服务端都会主动加上HttpOnly标记，本身就不希望前端代码直接操作。这种场景下你不需要手动获取Cookie内容，只要配置对请求的凭证选项，浏览器会自动在后续符合规则的请求中带上这个Cookie，不需要手动写入：
  • 前端站点和接口同源时，默认就会自动携带Cookie，无需额外配置
  • 跨域请求时，fetch请求需要添加配置credentials: 'include'，axios请求需要添加配置withCredentials: true；同时服务端需要设置响应头Access-Control-Allow-Credentials: true，且Access-Control-Allow-Origin不能配置为通配符*
• 如果Cookie没有设置HttpOnly标记，你可以直接在React代码中通过document.cookie读取到当前域名下所有非HttpOnly的Cookie值，自行解析键值对就能拿到对应字段。

你可以直接在Firefox网络面板点开该Cookie的详情，查看是否带有HttpOnly标记，就能直接判断能不能在代码里访问。
相关界面参考：
Firefox网络面板Cookie查看截图

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