React中如何获取HttpOnly类型的Cookie？已尝试多种方法未果

API 探路者

2026-5-8

为什么你无法在React中获取这个Cookie？

首先要明确：标记为HttpOnly: true的Cookie是禁止前端JavaScript代码访问的，这是浏览器的安全机制，专门用来防范XSS攻击，避免敏感Cookie被恶意脚本窃取。

你尝试的react-cookie、react-cookies本质上都是封装了document.cookie的操作，而document.cookie本身就无法读取HttpOnly类型的Cookie，所以不管用哪种库都拿不到它。

可行的解决方案

根据你的场景，这里有几种靠谱的处理方式：

方案一：后端将所需数据返回在响应体中
既然这个Cookie是passport发送的，你可以让后端在登录/认证接口的响应里，把你需要的信息（比如用户标识、权限等）直接放在返回的JSON数据里，前端通过接口返回值获取，完全不需要依赖Cookie。这是最安全也最常用的方式。
方案二：后端新增一个非HttpOnly的Cookie（仅适用于非敏感数据）
如果必须通过Cookie传递数据，且数据不敏感，可以让后端额外设置一个不带HttpOnly标记的Cookie，这样前端就能用document.cookie或者react-cookie正常读取了。但注意：敏感信息绝对不能这么做，否则会暴露XSS攻击风险。
方案三：让请求自动携带Cookie（无需前端读取）
如果你不需要在前端直接读取Cookie，只是需要在后续请求中把它传给后端验证身份，那只需要在前端请求时配置withCredentials为true：
- 用axios的话：
```
axios.defaults.withCredentials = true;
// 或者单个请求配置
axios.get('/api/xxx', { withCredentials: true })
```
- 用fetch的话：
```
fetch('/api/xxx', {
  credentials: 'include'
})
```
这样浏览器会自动把同域的Cookie（包括HttpOnly的）携带到请求中，后端就能正常验证了，前端根本不需要手动读取Cookie。