React生产环境无法请求Express后端，开发环境正常求助

proxy 字段仅在 React 开发服务器（npm start）中生效，生产环境构建后（npm run build）该配置完全不起作用。你现在遇到的情况是：生产环境中所有请求都被 React 前端路由接管，返回了 React 的入口 HTML 文件，而非 Express 后端的 API 响应。

方案1：让 Express 同时托管 React 静态文件与 API 路由 #

这种方式无需额外反向代理服务器，直接用 Express 处理所有请求：

1. 在 React 项目根目录执行构建命令，生成静态文件：

   npm run build
   

2. 修改 Express 代码，添加静态文件托管逻辑，注意 API 路由要放在静态文件托管之前：

   const express = require('express');
   const path = require('path'); // 引入path模块处理文件路径
   const PORT = process.env.PORT || 5000;
   const app = express();
   app.use(express.json());
   
   // 优先处理API路由，避免被静态文件路由覆盖
   app.get('/test', (req, res) => {
       res.status(200).json({test: "test"});
   })
   
   // 托管React构建后的静态文件，替换为你React项目build文件夹的绝对路径
   // 示例：React项目在/home/yourname/react-app，路径则为/home/yourname/react-app/build
   app.use(express.static(path.join(__dirname, '/home/yourname/react-app/build')));
   
   // 处理React前端路由：所有非API请求返回index.html，保证前端路由正常工作
   app.get('*', (req, res) => {
       res.sendFile(path.join(__dirname, '/home/yourname/react-app/build', 'index.html'));
   })
   
   app.listen(PORT, function() {
       console.log(`Listening on Port ${PORT}`);
   });
   

3. 确保 Express 服务在后台运行（避免SSH断开后服务终止），可以用 pm2：
   • 安装 pm2：npm install -g pm2
   • 启动服务：pm2 start server.js

方案2：用 Nginx 做反向代理（适合单独托管静态文件的场景） #

如果已经用 Nginx 托管 React 静态文件，只需添加反向代理规则转发 API 请求：

1. 编辑 Nginx 配置文件（通常在 /etc/nginx/conf.d/ 目录下，比如 mywebsite.conf）：

   server {
       listen 80;
       server_name mywebsite.com;
   
       # 托管React静态文件，替换为你的build文件夹路径
       root /home/yourname/react-app/build;
       index index.html;
   
       # 转发/test请求到Express的5000端口
       location /test {
           proxy_pass http://localhost:5000;
           proxy_set_header Host $host;
           proxy_set_header X-Real-IP $remote_addr;
       }
   
       # 处理React前端路由，避免刷新页面404
       location / {
           try_files $uri $uri/ /index.html;
       }
   }
   

2. 重启 Nginx 使配置生效：

   sudo systemctl restart nginx
   

• 用 ps aux | grep node 确认 Express 服务正在后台运行
• 如果采用方案1直接访问Express端口，需开放CentOS防火墙的5000端口：

  sudo firewall-cmd --add-port=5000/tcp --permanent
  sudo firewall-cmd --reload
  

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