Express & Csurf 拒绝Vue(Axios) POST请求：无效CSRF令牌问题

嘿，我之前也碰到过这种头疼的情况——明明请求头里带了CSRF令牌，却还是被后端判定无效。给你几个排查和解决的方向，你可以逐一试试：

• 确认令牌获取的正确性
  很多后端框架会把CSRF令牌存在cookie里（比如常见的XSRF-TOKEN），你在组件created钩子中获取的令牌可能不是最新的，或者提取方式有误。试试用这个方法精准提取cookie里的令牌：

  function getCsrfToken() {
    return document.cookie.split('; ')
      .find(row => row.startsWith('XSRF-TOKEN='))
      ?.split('=')[1];
  }
  

  另外，有些场景下页面加载初期cookie还未生成，导致你拿到空值，这时候建议把令牌获取逻辑放到发送请求前，而不是只在组件创建时获取一次。

• 核对请求头名称与后端要求完全匹配
  不同后端框架对CSRF请求头的命名要求不一样：比如Rails默认是X-CSRF-Token，Django是X-CSRFToken，还有的框架用X-XSRF-TOKEN。差一个字符都会导致后端识别不到，一定要和后端配置的名称完全对齐。

• 避免令牌过期或失效
  CSRF令牌通常有有效期，如果组件创建后过了很久才发送请求，令牌可能已经失效。建议把获取令牌的逻辑放到请求拦截器里，每次发请求前都拿最新的令牌：

  // 以axios为例
  axios.interceptors.request.use(config => {
    const csrfToken = getCsrfToken();
    if (csrfToken) {
      config.headers['X-CSRF-Token'] = csrfToken;
    }
    return config;
  });
  

• 排查跨域相关配置（如果是跨域请求）
  如果前端和后端不在同一域名下，要确保：

  • 前端请求中设置了withCredentials: true（比如axios请求配置里添加这个属性）
  • 后端配置了允许携带凭证，且Access-Control-Allow-Origin不能用通配符*，要指定具体域名
  • 浏览器cookie的SameSite属性设置正确，比如设为Lax或None（HTTPS环境下），否则浏览器可能不会发送包含令牌的cookie。

• 检查后端的验证逻辑
  有时候问题出在后端：比如后端没有正确从请求头读取令牌，或者验证逻辑存在bug。你可以查看后端日志，确认它是否接收到了你发送的X-CSRF-Token请求头，以及验证时是否用了正确的令牌值进行比对。

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