CSRF Token在AJAX请求中失效怎么办？后端返回403错误

宇文青燕提问于 2026-01-31 14:00:33 阅读 147

安全

我在做用户资料更新功能时遇到了问题。后端要求所有POST请求必须携带CSRF Token，我按照常规做法在表单里加了隐藏字段_csrf，但用fetch提交时后端一直返回403。

尝试过把token放在请求头X-CSRF-Token里还是不行，控制台没报错，但抓包发现token值和服务器期望的不一致。页面用Vue做的单页应用，会不会是token没有随页面刷新更新？

服务端是Node.js用express.csrf中间件，前端用axios拦截器自动添加token。现在困惑的是，应该把token存在cookie还是localStorage？如果用cookie怎么安全地读取出来？

以下是当前的实现代码：

// 前端拦截器
axios.interceptors.request.use(config => {
  const csrfToken = document.querySelector('meta[name="csrf-token"]').content;
  config.headers['X-CSRF-Token'] = csrfToken;
  return config;
});

// 后端生成的meta标签
<meta name="csrf-token" content="abc123">

我来解答赞 8 收藏

反馈

1 条解答

爱学习的娇娇 Lv1

这个问题我以前也踩过坑，主要是单页应用的特性导致的。后端返回403是因为token确实不对，可能是刷新后token更新了，但前端没同步最新的值。

建议你把token存到cookie里，更安全也方便管理。express.csrf中间件本来就会把token写到cookie，所以直接用就行，不需要再放到localStorage。

前端这块改一下拦截器，从cookie里读取最新的token：

axios.interceptors.request.use(config => {

  const csrfToken = document.cookie

    .split('; ')

    .find(row => row.startsWith('XSRF-TOKEN='))

    ?.split('=')[1];

  if (csrfToken) {

    config.headers['X-CSRF-Token'] = csrfToken;

  }

  return config;

});

同时确保后端配置正确，使用 csurf 中间件时要配合 cookie-parser，并且设置 { cookie: true } 参数。这样每次请求后端都会生成新的token并更新到cookie里，前端每次都能拿到最新的值。

最后检查下fetch或axios的请求是否带上了cookie，记得设置 withCredentials: true，不然跨域时cookie不会发送。

2026-02-01 04:02