如何使用Axios向Express服务端回传CSRF Token解决无效报错

你遇到的CSRF校验失败的核心原因是Axios默认不会跨域携带Cookie，而csurf开启cookie: true模式时，需要依赖Cookie中存储的CSRF Secret和你回传的Token做配对校验，两次请求（获取Token的GET请求、提交登录的POST请求）没有携带同源Cookie的情况下，服务端拿到的Secret和Token不匹配，就会抛出invalid csrf token错误。

解决方案 #

• 第一步：配置Axios允许携带凭证（Cookie）
  最简单的方式是全局开启Axios的withCredentials配置，在你项目初始化Axios的位置添加：

  axios.defaults.withCredentials = true;
  

  如果不想全局配置，也可以分别在两个请求中单独添加配置：
  一是获取CSRF Token的GET请求：

  let csrfTokenRequest = await axios.get(EndPoints.CSRF_TOKEN, {
    withCredentials: true
  });
  

  二是登录的POST请求：

  axios.post(EndPoints.SIGN_IN, requestBody, {
      headers: await this.getRequestHeaders(),
      withCredentials: true
  })
  

• 第二步：检查服务端跨域配置（前后端分离部署场景必填）
  如果你的项目是前后端分离、域名/端口不一致的场景，服务端需要配置CORS允许前端携带凭证，以cors中间件为例：

  const cors = require('cors');
  app.use(cors({
    // 不能用通配符*，必须填写前端实际的访问地址，比如http://localhost:8080
    origin: '你的前端访问地址',
    credentials: true
  }));
  

• 第三步：校验请求信息排查其他问题
  如果做完上述配置还是报错，可以在浏览器开发者工具的网络面板里核对两个信息：
  • 调用获取CSRF Token的接口时，响应头中有没有Set-Cookie字段种下_csrf开头的Cookie
  • 提交登录的POST请求时，请求头中有没有带上_csrfCookie，同时有没有携带X-CSRF-TOKEN字段

你的服务端中间件顺序是符合csurf要求的，不需要调整。

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