React请求Node后端一直报session-token错误的问题如何解决

你看到的Bad-Session-Token实际是CSRF校验失败，从你贴的错误处理代码可以看到，EBADCSRFTOKEN错误返回的就是这个403响应，和session本身的token无关，按下面步骤排查即可：

1. 修复跨域凭证配置（最高概率问题） #

前后端端口不同属于跨域场景，默认浏览器不会把后端种的session cookie带到请求里，后端找不到对应session自然会校验失败：

• 前端Axios配置添加withCredentials: true，允许请求携带跨域cookie：

{
      method: "post",
      url: "",
      baseURL: site.reqUrl,
      headers: {"CSRF-Token":"动态获取的token"},
      withCredentials: true, // 新增这一行
      data: {},
}

• 后端必须配置CORS规则，不能用通配符*，要明确允许前端地址，同时开启凭证支持：

const cors = require('cors')
app.use(cors({
  origin: 'http://localhost:3000', // 填你的React前端访问地址
  credentials: true
}))

注意：CORS配置要放在session、csrf中间件之前加载

2. 不要硬编码CSRF-Token（第二大概率问题） #

CSRF Token是和每个用户的session绑定的，每个用户、每个session的token都不一样，你现在硬编码的固定token肯定和后端session中存储的token匹配不上：

• 后端新增接口返回当前session对应的CSRF Token：

app.get('/api/get-csrf', (req, res) => {
  res.json({ token: req.csrfToken() })
})

• 前端在发起业务请求前，先调用上面的接口获取最新的CSRF Token，再放到请求头中。

3. 校验session存储连通性 #

如果上面配置都改了还是报错，排查MongoDB会话存储是否正常：

• 查看MongoDB服务是否正常启动，SomeDb库下是否存在mySessions集合
• 在业务接口中打日志输出req.session，如果返回undefined说明session没有被正确解析，要么cookie没有正常传到后端，要么MongoDBStore连接失败，查看控制台是否有MongoDB连接报错。

4. 本地开发额外适配 #

你当前注释了sameSite配置，本地开发阶段如果还是有cookie携带问题，可以把session配置中的sameSite改为：

cookie: {
  maxAge: 7.2e+6,
  sameSite: 'lax', // 本地同域localhost不同端口用lax即可
  secure: false,
  httpOnly: false
}

上线阶段如果是HTTPS协议，需要把sameSite设为none，同时secure设为true

打开浏览器控制台的网络面板，查看发往后端的POST请求：

• 请求头中是否存在Cookie字段，里面包含SomeCookie=xxx的内容
• 请求头中CSRF-Token的值是否是后端最新返回的动态值

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