如何从前端获取后端设置的浏览器Cookie以验证用户身份

首先明确：你后端设置的Cookie带有httpOnly: true属性，这个属性的核心作用是禁止前端JavaScript直接读取该Cookie，属于安全机制，用来防范XSS攻击窃取token。所以前端无法通过document.cookie拿到这个jwtoken，但这完全不影响完成用户身份验证。

正确的实现思路是让浏览器自动携带Cookie到后端，由后端完成token有效性验证，具体分两种场景：

1. 同域请求（前后端域名一致） #

前端发起API请求时，浏览器会自动将同域下的httpOnly Cookie携带到请求头中，无需额外配置：

用fetch发起请求示例：

fetch('/api/protected-route', {
  method: 'GET'
})
.then(response => response.json())
.then(data => {
  // 处理后端返回的验证结果
})
.catch(err => console.error(err));

用axios发起请求示例：

axios.get('/api/protected-route')
.then(response => {
  // 处理接口返回数据
})
.catch(err => console.error(err));

后端只需在接口中解析请求头里的Cookie，用jwt.verify验证token有效性即可。

2. 跨域请求（前后端域名不同） #

如果前后端是跨域部署，需要两步配置：

• 后端：在CORS配置中允许携带凭证，以Express的cors中间件为例：

const cors = require('cors');
app.use(cors({
  origin: 'https://your-frontend-domain.com', // 指定前端域名
  credentials: true // 允许跨域携带Cookie
}));

• 前端：发起请求时开启凭证携带选项：

fetch示例：

fetch('https://your-backend-domain.com/api/protected-route', {
  method: 'GET',
  credentials: 'include' // 携带跨域Cookie
})
.then(response => response.json())
.then(data => console.log(data));

axios示例：

axios.get('https://your-backend-domain.com/api/protected-route', {
  withCredentials: true // 开启跨域凭证携带
})
.then(response => console.log(response.data));

不推荐的方案：让前端直接拿到token #

如果非要让前端获取到token（不建议，会降低安全性），可以在后端返回Cookie的同时，把token也放在响应体中：

// 后端修改登录接口
const token = await loginNow.generateAuthToken();
res.cookie("jwtoken", token, {
  expires: new Date(Date.now() + 100000000000000),
  httpOnly: true,
});
// 同时返回token到响应体
res.status(200).json({ success: true, token });

前端从响应中拿到token后，可存入localStorage或sessionStorage，后续请求手动将token放在请求头（如Authorization: Bearer ${token}）。但这种方式会让token暴露在前端JS环境中，容易被XSS攻击窃取，安全性远低于httpOnly Cookie方案。

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