React.js应用无法配置proxy代理，该如何解决？

• 修正proxy格式错误：你写的"proxy":"http://localhost/5000"里端口号用了斜杠，正确格式应该是"proxy": "http://localhost:5000"，这是最容易犯的低级错误。
• 重启开发服务器：修改package.json后必须重启React的开发服务（比如执行npm start重启），配置才会被加载，很多人忽略了这一步导致配置不生效。
• 确认请求路径匹配：如果后端的根路由不是/，要调整fetch的路径。比如后端API前缀是/api，那应该写fetch("/api")，proxy会自动转发到http://localhost:5000/api。
• 适配react-scripts v5+版本：如果你的项目用的是react-scripts v5及以上版本，简单字符串格式的proxy可能受限，需要用自定义代理配置：
  1. 在项目的src目录下创建setupProxy.js文件
  2. 安装依赖：npm install http-proxy-middleware --save-dev
  3. 在setupProxy.js中添加以下代码：

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

  配置完成后重启开发服务器即可。
• 验证后端服务状态：确保localhost:5000的后端服务正在运行，直接用浏览器访问http://localhost:5000确认能正常返回内容，排除后端本身的问题。
• 排查请求拦截因素：检查是否有浏览器插件、前端请求拦截器（比如axios的拦截器）修改了请求的目标地址。

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