使用axios-mock-adapter出现404错误，请求配置排查帮助

你的404问题根源很明确——你的mock是挂载在自定义的axiosInstance上，但API调用用的是全局axios对象，两者不是同一个实例，mock自然拦截不到请求，导致请求真的发往了http://localhost:3000，返回404。

1. 修改projectsApi.ts使用自定义axios实例 #

把全局axios替换成你在axiosConfig.ts中导出的实例：

// projectsApi.ts
import axiosInstance from './axiosConfig'; // 替换全局axios为自定义实例

const fetchAllProjects = async () => {
    console.log('Fetching all projects');
    const res = await axiosInstance.get('/projects/fetchAll'); // 使用实例发起请求
    console.log(res);
    return res;
}

export { fetchAllProjects };

2. 确保mock已被正确初始化 #

在调用fetchAllProjects之前，必须先导入mockAxios来激活mock拦截逻辑。比如在测试文件或应用入口（开发环境启用mock时）添加：

// 示例：在调用接口的文件中导入mock
import './mockAxios';
import { fetchAllProjects } from './projectsApi';

// 调用接口
const run = async () => {
  const response = await fetchAllProjects();
  console.log(response);
}

run();

额外验证小技巧 #

可以通过查看mock的请求历史，确认是否成功拦截请求：

import mockAxios from './mockAxios';

// 调用接口后打印历史请求
console.log(mockAxios.history.get); // 如果mock生效，这里会显示被拦截的请求详情

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