Express搭配React项目发送CSURF token报错invalid csrf token如何解决

csurf 中间件开启 cookie: true 模式时，cookie 中存储的 _csrf 是加密用的盐值，并非直接用于服务端校验的有效 CSRF Token，直接读取该值传递给服务端必然触发校验失败。

第一步：服务端新增CSRF Token获取接口 #

在现有CSRF中间件注册逻辑之后，新增一个专门给React端获取有效Token的接口，原有EJS相关的渲染、校验逻辑完全不用修改：

const csrfMiddleware = csurf({
  cookie: true,
});
app.use(csrfMiddleware);

// 新增：给React前端返回有效CSRF Token的接口
app.get('/api/csrf-token', (req, res) => {
  res.json({
    csrfToken: req.csrfToken()
  });
});

// 原有其他路由、EJS渲染逻辑保持不变

第二步：修改React端请求逻辑 #

放弃直接读取Cookie中_csrf的逻辑，改为先调用上述接口获取有效Token，所有请求都开启credentials配置确保Cookie正常传递：

// 初始化应用时先请求获取有效CSRF Token
const getCsrfToken = async () => {
  const response = await fetch('/api/csrf-token', {
    credentials: 'include' // 必须开启，确保服务端种下的CSRF Cookie能正常保存和传递
  });
  const data = await response.json();
  return data.csrfToken;
}

// 业务请求时使用拿到的有效Token
const csrfToken = await getCsrfToken();
const config = {
  headers: {
    "CSRF-Token": csrfToken,
    "Content-Type": "application/json",
  },
  credentials: 'include' // 所有业务请求都需要开启该配置
};

如果React应用和Node服务不在同域名下，需要额外配置服务端CORS规则：

• Access-Control-Allow-Origin 指定为React应用的域名，不能设为*
• Access-Control-Allow-Credentials 设为true

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