通过Apache反向代理访问React开发环境的问题

我帮你捋清楚问题根源和具体修复步骤：

核心问题在于Create React App默认把根路径（/）作为所有资源的引用基础，但你现在通过/react-app子目录反向代理访问时，浏览器会错误地去example.com/static/xxx加载资源，而不是正确的example.com/react-app/static/xxx，这就导致了资源引用异常。

下面是具体的解决方案：

1. 配置React项目的基础路径 #

在你的React项目根目录的package.json文件中，添加homepage字段：

{
  "name": "your-app-name",
  "homepage": "/react-app", // 新增这一行
  // ... 其他原有配置项
}

这个配置会告诉React，无论是开发还是构建打包时，所有资源路径都自动带上/react-app前缀。

如果是开发环境，还需要额外让这个配置生效：

• 方式一：在项目根目录创建.env.development文件，写入：

PUBLIC_URL=/react-app

• 方式二：启动开发服务器时直接指定环境变量：

PUBLIC_URL=/react-app npm start

2. 调整Apache反向代理配置 #

你的现有配置存在路径匹配的细节问题，建议修改为：

<VirtualHost *:80>
  ServerName example.com
  
  # 注意路径结尾的斜杠，确保映射准确
  ProxyPass /react-app/ http://127.0.0.1:3000/
  ProxyPassReverse /react-app/ http://127.0.0.1:3000/
</VirtualHost>

修改完成后重启Apache服务：

sudo systemctl restart apache2

另外，要确保你的Apache已经启用了必要的代理模块，执行以下命令启用：

sudo a2enmod proxy proxy_http
sudo systemctl restart apache2

3. 验证效果 #

完成以上配置后，重启你的React开发服务器，访问http://example.com/react-app，就能正常加载所有资源了。

如果是生产环境部署，执行npm run build后，build目录里的所有资源路径都会自动带上/react-app前缀，直接将build目录内容部署到Apache对应位置即可（或者继续用反向代理指向build目录的静态文件）。

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