使用Axios发送POST请求时设置X-CSRF-TOKEN遇问题

可能的原因及解决方法： #

• 令牌含隐形空白字符：控制台打印的令牌可能存在换行、空格等隐形字符，复制到Postman时会自动过滤，但Axios会原样携带。尝试对获取到的令牌做trim处理：

  const csrfToken = tokenResponse.headers['x-csrf-token'].trim();
  

• 请求头大小写不一致：GET请求用的是X-CSRF-Token，POST用的是X-CSRF-TOKEN，部分服务器对HTTP头字段大小写敏感，需保持两者一致：

  headers: {
      'X-CSRF-Token': csrfToken, // 和GET请求的头字段名统一
  }
  

• Cookie未同步携带：部分CSRF验证要求同时携带服务器在GET请求时设置的会话Cookie，尤其是跨域场景。在GET和POST请求配置中添加withCredentials: true，确保Cookie自动携带：

  // GET请求配置
  {
      // ...其他配置
      withCredentials: true
  }
  // POST请求配置
  {
      // ...其他配置
      withCredentials: true
  }
  

• 请求体格式不匹配：确认服务器期望的Content-Type，若服务器要求application/x-www-form-urlencoded，需用qs库序列化请求体并指定对应头：

  import qs from 'qs';
  // ...
  const response = await axios.post(
      'https://URL/Request',
      qs.stringify({ Request: [] }),
      {
          // ...其他配置
          headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
          }
      }
  );
  

修改后的完整示例代码： #

const tokenResponse = await axios.get('https://URL/Request', {
    auth: {
        username: 'user',
        password: 'pass',
    },
    headers: {
        'X-CSRF-Token': 'Fetch',
    },
    withCredentials: true
});

const csrfToken = tokenResponse.headers['x-csrf-token'].trim();

const response = await axios.post(
    'https://URL/Request',
    { Request: [] },
    {
        auth: {
            username: 'user',
            password: 'pass',
        },
        headers: {
            'X-CSRF-Token': csrfToken,
            'Content-Type': 'application/json'
        },
        withCredentials: true
    }
);

额外排查步骤： #

• 用浏览器开发者工具或Axios拦截器打印完整请求头，确认令牌未被篡改；
• 检查令牌有效期，避免POST请求时令牌已过期；
• 对比Postman和Axios的请求详情（包括Cookie、Content-Type等），找出差异点。

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