React Yarn Node项目本地正常，部署Apache后接口请求失败怎么兼容本地与线上？

1. 用环境变量区分本地/生产地址 #

硬编码localhost:3005会导致生产环境失效，用React环境变量统一管理API地址：

• 本地开发：在React项目根目录新建.env.development文件，写入：

  REACT_APP_API_URL=http://localhost:3005
  

• 生产环境：新建.env.production文件，写入（替换为你的域名+后端路径前缀）：

  REACT_APP_API_URL=/api
  

• 修改Axios请求代码：

  const response = await axios.post(`${process.env.REACT_APP_API_URL}/send-email`, {
    // 请求参数
  })
  

  注：React环境变量必须以REACT_APP_开头，才会被打包工具识别。

2. 配置Apache反向代理 #

生产环境下前端直接访问后端端口会被浏览器拦截，需要Apache把前端API请求转发到Node后端：

• 打开Apache虚拟主机配置文件（如/etc/apache2/sites-available/your-domain.conf），添加代理规则：

  ProxyPass /api http://localhost:3005
  ProxyPassReverse /api http://localhost:3005
  

• 启用Apache代理模块并重启服务：

  a2enmod proxy
  a2enmod proxy_http
  systemctl restart apache2
  

3. 调整Node后端配置 #

• 让后端监听服务器内网IP，确保Apache能访问到：

  app.listen(3005, '0.0.0.0', () => {
    console.log('Server running on port 3005');
  });
  

• 配置CORS解决跨域（如果前端和后端域名不同）：
  先安装cors包：

  npm install cors
  

  再在后端代码中启用：

  const cors = require('cors');
  // 生产环境可限制指定域名，更安全
  app.use(cors({ origin: 'https://your-domain.com' }));
  

4. 打包部署React项目 #

• 生产环境打包前端代码：

  yarn build
  

• 将build文件夹内的所有文件复制到Apache网站根目录（如/var/www/html）。

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