Create React App项目使用setupProxy.js代理API请求出现404问题求助

• 确认setupProxy.js存放位置正确
  该文件必须放在项目src根目录下，和index.js同级，CRA只会自动识别该位置的代理配置，放在其他目录都会失效。
• 匹配http-proxy-middleware版本的写法
  运行npm list http-proxy-middleware查看当前安装的版本：
  • 若为1.x版本：引入和调用写法应为

    const proxy = require("http-proxy-middleware");
    module.exports = (app) => {
      app.use(proxy("/api", {
        target: "http://my.server.com",
        changeOrigin: true,
        // 其余配置保持不变
      }))
    }
    

  • 若为2.x及以上版本：才可以使用你当前的解构createProxyMiddleware的写法。
• 修改配置后必须重启开发服务
  setupProxy.js的改动不会触发热更新，每次修改后必须手动停止npm run start进程，再重新启动才会加载新的代理规则。
• 检查axios全局baseURL配置
  如果你在项目中全局配置了axios.defaults.baseURL = "http://localhost:3000"，相对路径的请求会优先拼接baseURL，导致代理规则不生效。可以删除该配置，或者改为根据环境变量动态设置：

  axios.defaults.baseURL = process.env.NODE_ENV === 'production' ? 'http://my.server.com' : ''
  

• 额外规范提示：你当前在useEffect中直接传入async函数的写法不符合React要求，会触发运行时警告，可调整为如下写法：

  useEffect(() => {
    const getReposData = async () => {
      setRepos(await getRepos());
    };
    getReposData();
  }, []);
  

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