React JS 18自动刷新时数据拉取报错 手动整页刷新正常

这个问题是两个开发环境的默认特性叠加触发的：

• 用npx create-react-app搭建的项目，如果仅在package.json中配置简易代理"proxy": "http://localhost:5000"，这个代理本身存在场景限制：只有整页冷加载时，才会把非HTML请求转发到后端服务。修改代码触发热更新（即页面自动刷新、局部重渲染）时，组件内异步发起的接口请求不会走代理规则，直接打到3000端口的React开发服务上。3000端口本身没有实现/api/v1/products接口，因此返回500错误。
• React 18默认开启StrictMode严格模式，开发环境下会对组件执行「挂载→卸载→重新挂载」的预检查流程，空依赖数组的useEffect会因此在开发环境多执行一次，第二次执行时正好命中热更新后的代理失效场景。手动整页刷新属于从头冷启动应用，代理规则会正常初始化，请求能正确转发到5000端口的Node服务，因此不会报错。

选择任意一种方案即可解决问题：

方案1：配置axios固定baseURL（最稳定，推荐） #

直接绕开CRA的代理转发，开发环境下请求直接打到Node服务地址：

1. 在axios请求配置中添加环境判断，设置默认基础路径：

   import axios from 'axios';
   // 开发环境直连后端地址，生产环境使用相对路径
   axios.defaults.baseURL = process.env.NODE_ENV === 'development' 
     ? 'http://localhost:5000' 
     : '';
   

2. 在Node服务中配置CORS跨域允许，安装cors中间件并在服务入口启用即可，避免3000端口请求5000端口被浏览器跨域策略拦截。

方案2：手动配置CRA代理规则 #

替换默认简易代理为http-proxy-middleware实现的规则，解决HMR场景下代理失效问题：

1. 安装依赖：

   npm install http-proxy-middleware -D
   

2. 在src目录下新建setupProxy.js文件（CRA会自动识别该文件，不要修改文件名和存放位置），写入以下配置：

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

3. 重启React开发服务即可生效。

方案3：关闭React 18严格模式（不推荐） #

如果不需要严格模式的开发期问题检查，可以直接关闭双调用逻辑：打开src/index.js文件，移除包裹根组件的<React.StrictMode>标签即可。该方案会丢失严格模式对不规范代码的提示能力，仅作为临时调试方案使用。

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