React项目Axios请求404：代理未指向Express 8000端口问题求助

问题背景 #

基于 React + Express + MongoDB 开发的应用，已在 package.json 配置 proxy 指向后端 8000 端口，但前端 Axios 请求仍默认访问 React 的 3000 端口，导致 404 错误。后端接口通过 Postman 测试正常，手动修改浏览器端口为 8000 可正常获取数据。

解决方案 #

1. 适配 React 版本的代理配置方式 #

如果使用 create-react-app v5 及以上版本，仅靠 package.json 的 proxy 字段可能无法生效（webpack-dev-server 变更导致），需通过 setupProxy.js 手动配置代理：

• 在项目 src 目录下创建 setupProxy.js 文件，添加以下代码：

  const { createProxyMiddleware } = require('http-proxy-middleware');
  
  module.exports = function(app) {
    app.use(
      '/api',
      createProxyMiddleware({
        target: 'http://localhost:8000',
        changeOrigin: true,
      })
    );
  };
  

• 无需手动引入该文件，create-react-app 会自动加载此配置。

2. 确认 package.json 代理配置格式 #

确保 proxy 是顶级字段，无嵌套、无多余路径：

{
  "name": "your-react-app",
  "version": "0.1.0",
  "proxy": "http://localhost:8000", // 正确写法，不要加 /api 后缀
  // 其他配置...
}

3. 重启 React 开发服务器 #

修改代理配置后，必须重启 npm start，否则新配置不会生效。

4. 检查 Axios 全局配置 #

若全局设置了 Axios 的 baseURL，会覆盖代理转发逻辑：

// 若有此类代码，移除或修改为空
axios.defaults.baseURL = 'http://localhost:3000';

5. 验证请求参数匹配性 #

后端接口通过 /:name 查询 MongoDB 中的文章，需确保前端 useParams() 获取的 articleId 与数据库中文章的 name 字段完全一致：

• 在前端 useEffect 中添加日志，确认参数正确性：

  useEffect(() => {
    console.log('articleId:', articleId); // 检查是否与数据库中文章name匹配
    const loadArticleInfo = async () => {
      const response = await axios.get(`/api/articles/${articleId}`);
      setArticleInfo(response.data);
    }
    loadArticleInfo();
  }, [articleId]); // 添加articleId到依赖数组，避免闭包问题
  

• 若参数不匹配，即使代理生效，后端也会返回 404。

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