如何通过Axios请求拦截器避免Internet Explorer缓存HTTP请求？

你的思路完全正确！使用Axios的请求拦截器就是无需逐个修改请求就能全局禁用IE缓存的最佳方法，不用再手动给每个函数加请求头，非常高效。

完善后的全局拦截器实现 #

你给出的代码已经有了核心逻辑，我们可以补充更全面的缓存控制头（毕竟IE对不同头的支持有差异），同时处理headers可能为undefined的边界情况，避免潜在报错：

import axios, { AxiosRequestConfig } from 'axios';

// 封装添加禁用缓存头的函数
const addNoCachingHeaders = (config: AxiosRequestConfig): AxiosRequestConfig => {
  // 处理headers为空的情况
  const headers = config.headers || {};
  
  return {
    ...config,
    headers: {
      ...headers,
      'Pragma': 'no-cache',
      'Cache-Control': 'no-cache, no-store, must-revalidate',
      'Expires': '0'
    }
  };
};

// 注册全局请求拦截器
axios.interceptors.request.use(addNoCachingHeaders);

为什么这个方案有效？ #

• Axios的请求拦截器会在每一个请求发送到服务器之前自动执行，帮你把禁用缓存的头批量添加到所有请求里，完全不用修改业务代码里的axios.get/axios.post等调用。
• 补充的Cache-Control和Expires头是HTTP标准的缓存控制字段，配合Pragma能覆盖IE的各种缓存场景，确保彻底禁用缓存。

可选：灵活跳过特定请求 #

如果你的应用里有少数请求需要保留缓存（比如静态资源），可以给这些请求的config加个标记，拦截器里判断后跳过：

const addNoCachingHeaders = (config: AxiosRequestConfig): AxiosRequestConfig => {
  // 如果配置了keepCache，就跳过添加头
  if (config?.keepCache) {
    return config;
  }
  
  const headers = config.headers || {};
  return {
    ...config,
    headers: {
      ...headers,
      'Pragma': 'no-cache',
      'Cache-Control': 'no-cache, no-store, must-revalidate',
      'Expires': '0'
    }
  };
};

// 使用时给需要缓存的请求加标记
axios.get('/static/data.json', { keepCache: true });

这样既实现了全局禁用IE缓存，又保留了特殊场景的灵活性，完全满足你的需求。

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