前端如何正确设置CSRF Token到请求头中？

书生シ莉莉提问于 2026-03-13 15:29:20 阅读 3

安全

我们后端启用了CSRF防护，要求每个POST请求都必须带上 X-CSRF-Token 请求头。我在登录成功后把token存到了 localStorage 里，但在发起请求时总是被拦截，提示 token 无效或缺失。是不是我设置请求头的方式有问题？

我用的是 fetch 发请求，代码大概这样：

fetch('/api/update-profile', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-CSRF-Token': localStorage.getItem('csrfToken')
  },
  body: JSON.stringify({ name: 'test' })
})

后端是用 Express 写的，确认过 token 确实存在且没过期，但就是不通过验证。是不是应该用 Cookie 而不是 localStorage？或者请求头名字不对？

我来解答赞 1 收藏

反馈

1 条解答

___涵菲 Lv1

问题在于自定义请求头需要 CORS 预检，后端必须在 Access-Control-Allow-Headers 里允许 X-CSRF-Token。最省事的做法是改用 Cookie 存 token（设置 SameSite=Strict 或 Lax），浏览器会自动带上，不用手动加 header。

如果非要用 header，Express 后端需要加这个中间件：

app.use((req, res, next) => {

  res.header('Access-Control-Allow-Headers', 'Content-Type, X-CSRF-Token');

  next();

});

我一般直接用 Cookie，配置一下 SameSite 属性就行，省心。

2026-03-13 16:03