在Next.js中使用axios-cache-interceptor遇setupCache()只能调用一次错误

问题原因 #

setupCache()会直接修改传入的Axios实例，重复调用就会触发该报错。即便把配置抽离到单独文件，也可能因为模块重复加载（比如开发环境热重载、路径大小写不一致）或实例创建逻辑重复执行导致问题。

解决方案 #

1. 正确创建单例缓存Axios实例 #

把Axios实例和缓存配置完全抽离到单独模块，确保setupCache()只执行一次：

创建utils/axios.ts文件：

import Axios from 'axios';
import { setupCache } from 'axios-cache-interceptor';

// 先创建独立的Axios实例，避免修改全局Axios
const axiosInstance = Axios.create({
  // 可添加全局配置，比如baseURL、超时时间等
});

// 仅调用一次setupCache配置缓存
const axiosWithCache = setupCache(axiosInstance);

export default axiosWithCache;

2. 避免模块重复加载 #

• 检查所有导入路径的一致性，不要混用../utils/axios和../Utils/axios（文件系统大小写敏感会导致模块被视为不同文件）。
• 如果是Next.js这类有热重载的框架，可在配置文件中加单例判断，防止热重载时重复初始化：

import Axios from 'axios';
import { setupCache, AxiosCacheInstance } from 'axios-cache-interceptor';

let axiosWithCache: AxiosCacheInstance;

// 确保只初始化一次
if (!axiosWithCache) {
  const instance = Axios.create();
  axiosWithCache = setupCache(instance);
}

export default axiosWithCache;

3. 组件中仅导入已配置好的实例 #

绝对不要在组件内部调用setupCache()，组件只需要导入上面配置好的实例即可：

// DashboardPage.tsx
import axiosWithCache from '../utils/axios';

export default function DashboardPage() {
  const { data: session } = useSession();
  
  // 直接用axiosWithCache发起请求
  const fetchData = async () => {
    const res = await axiosWithCache.get('/api/data');
    // 处理返回数据
  };
}

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