React项目配置axios-mock-adapter后请求仍返回404错误的修复

• 核心匹配错位：你写的mock拦截器，是绑定在自己Axios.create()生成的独立实例axiosInstance上的，但组件里发请求用的是直接从axios包导入的全局默认axios对象。axios-mock-adapter的拦截逻辑只对绑定的实例生效，完全管不到全局默认axios发出的请求，请求会直接绕过mock打到真实后端，自然拿不到mock预设的数据，触发404。
• 规则未实际执行：你写的mock初始化、注册路由规则的代码，从来没在项目的执行链路里被调用过。哪怕你把请求对象改成和mock的实例一致，没有执行featureTable(mock)的注册逻辑，也不会有匹配规则能命中。

1. 统一请求实例
   把组件里发请求的全局axios，替换成mock模块导出的、绑定了拦截器的axiosInstance：

// 替换组件内原有axios导入和调用逻辑
// 原来错误写法：
// import axios from 'axios';
// axios.get("http://localhost:8080/users")

// 正确写法：
import * as React from 'react';
import { axiosInstance } from '../../mocks/index';
import './index.scss';

const FeatureTable = () => {
  React.useEffect(() => {
    axiosInstance.get("http://localhost:8080/users").then((response: any) => {
      console.log(response.data);
    });
  }, []);

  return <div className="container" />
}

export default FeatureTable;

2. 确保mock初始化在项目启动时执行
   找到项目入口文件（通常为src/main.tsx/src/index.tsx），在业务组件渲染之前引入mock模块，让规则注册逻辑真正跑起来：

// src/main.tsx 示例
import React from 'react'
import ReactDOM from 'react-dom/client'
// 优先加载mock模块，保证规则先注册
import './mocks'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

3. （推荐）统一路径配置，避免硬编码不匹配
   现在组件和mock规则里都硬编码了完整URL，后续改端口、域名的时候很容易两边改漏导致匹配失效。可以把公共域名配置到axios实例的baseURL上，请求和mock规则都只写相对路径：

// mocks/index.js 调整实例配置
export const axiosInstance = Axios.create({
  baseURL: 'http://localhost:8080'
});

// mocks/table.js 简化匹配规则
const users = [{ id: 1, name: "John Smith" }];
const featureTable = (mock: any) => {
  mock.onGet("/users").reply(200, users);
}

// 组件内的请求同步简化
axiosInstance.get("/users")

• 因为你配置了1秒的响应延迟，请求会等待1秒左右才返回数据，不会瞬间拿到响应
• 保留onNoMatch: "throwException"的配置，如果有路径没匹配上mock规则，控制台会直接抛出异常，能快速定位不匹配的地址

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