axios@1.6.0中X-XSRF-TOKEN头自动生成问题及优化方案咨询

更优解决方案推荐 #

1. 优化可信主机校验逻辑

你当前用startsWith判断URL存在误判风险（比如可能匹配到https://example.com.attacker.com这类恶意域名），可以用URL对象精准提取主机名校验：

import axios from 'axios';

const instance = axios.create();
const trustedHosts = new Set(['example.com', 'api.example.com']); // 仅存主机名，无需协议

instance.interceptors.request.use((config) => {
  try {
    // 处理绝对/相对URL，统一解析出主机名
    const url = new URL(config.url, window.location.origin);
    if (trustedHosts.has(url.hostname)) {
      // 简化Cookie获取逻辑，无需依赖外部函数
      const token = document.cookie.split('; ').find(row => row.startsWith('XSRF-TOKEN='))?.split('=')[1];
      if (token) {
        config.headers['X-XSRF-TOKEN'] = token;
      }
    }
  } catch (e) {
    // 捕获无效URL解析错误，不影响请求发送
  }
  return config;
});

2. 扩展Axios内置XSRF逻辑（替代拦截器）

Axios原生XSRF自动填充依赖同源判断，你可以重写它的同源校验函数，把可信主机纳入允许范围：

import axios from 'axios';
import { isURLSameOrigin } from 'axios/lib/helpers/isURLSameOrigin';

const trustedHosts = new Set(['example.com', 'api.example.com']);

// 自定义同源判断规则：原生同源通过，或属于可信主机
const customIsSameOrigin = (url) => {
  if (isURLSameOrigin(url)) return true;
  try {
    const parsedUrl = new URL(url, window.location.origin);
    return trustedHosts.has(parsedUrl.hostname);
  } catch (e) {
    return false;
  }
};

// 替换Axios默认的同源判断逻辑
axios.defaults.isURLSameOrigin = customIsSameOrigin;

// 创建实例时直接启用原生XSRF配置，无需额外拦截器
const instance = axios.create({
  xsrfCookieName: 'XSRF-TOKEN',
  xsrfHeaderName: 'X-XSRF-TOKEN'
});

这种方式更贴合Axios的原生设计，不需要手动维护拦截器逻辑。

3. 复用Cookie获取逻辑

如果多处需要获取XSRF Token，可以封装成工具函数：

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

在需要的地方直接调用，避免重复代码。

关于等待1.6.1版本 #

如果官方1.6.1版本会内置可信主机的XSRF配置，等待确实是最省心的方案。在此之前，上述方案可以让你的代码更健壮、更符合Axios的设计规范。

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