AXIOS高频请求时XSRF-TOKEN与Cookie不匹配问题求助

问题根源在于axios默认会在实例创建时一次性读取Cookie中的XSRF-TOKEN并缓存，后续请求复用该值。如果服务器在请求后更新了Cookie里的XSRF-TOKEN，高频请求时后续请求会继续使用旧值，导致请求头与Cookie值不匹配。

解决方案步骤： #

• 修正axios配置项：你代码中的baseUrl是错误的，axios正确配置项为baseURL（驼峰写法），配置错误可能导致部分默认行为异常。
• 禁用axios自动携带XSRF-TOKEN，改为每次请求前手动从Cookie读取最新值并设置到请求头。
• 使用请求拦截器确保每次请求获取最新Cookie值。

具体代码实现： #

首先，添加读取Cookie的工具函数：

function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}

然后修改axios实例和请求逻辑：

// 修正baseURL配置
let axiosInst = axios.create({
  baseURL: "MY_BASE_URL_HERE",
  timeout: 20000,
  // 禁用自动携带XSRF-TOKEN，改为手动处理
  xsrfCookieName: '',
  xsrfHeaderName: ''
});

// 添加请求拦截器，每次请求前设置最新的X-XSRF-TOKEN
axiosInst.interceptors.request.use(config => {
  const xsrfToken = getCookie('XSRF-TOKEN');
  if (xsrfToken) {
    config.headers['X-XSRF-TOKEN'] = xsrfToken;
  }
  return config;
}, error => {
  return Promise.reject(error);
});

function placeRequest(data) {
  if (data && axiosInst) {
    axiosInst
      .post("MY_API_HERE", CryptojsEncrypt(data))
      .then((res) => {
        console.log("success");
      })
      .catch((err) => {
        console.log('error');
      });
  }
}

额外说明： #

• 如果你的服务器端使用的是其他Cookie名称（比如csrfToken），请修改getCookie中的参数为对应名称。
• 确保每次请求前都重新读取Cookie，而不是缓存值，这样就能保证请求头的X-XSRF-TOKEN始终和当前Cookie中的值一致。

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