Apache代理React页面问题：访问localhost/funds时资源缺失

你的问题核心是React生成的静态资源采用了绝对路径（比如/static/css/main.xxx.css），当用户通过localhost/funds访问时，浏览器会直接请求localhost/static/...而非localhost/funds/static/...，导致资源加载失败、页面空白。以下是几个可行的解决方案：

方案1：修改React项目的publicPath（推荐） #

在React项目的package.json中添加homepage字段，指定资源的基础路径：

{
  "name": "your-react-app",
  "homepage": "/funds",
  // 其他原有配置...
}

执行npm run build重新打包项目，再启动React服务。此时React生成的所有资源路径都会自动带上/funds前缀（比如/funds/static/css/main.xxx.css），配合你原有的Apache代理配置就能正常加载资源。

方案2：扩展Apache代理规则覆盖静态资源路径 #

如果不想重新打包React，可以直接在Apache配置中代理React的静态资源目录（比如/static、/assets，具体以你React项目打包后的输出目录为准）：

ProxyPass /funds http://localhost:3000/funds
ProxyPassReverse /funds http://localhost:3000/funds

# 代理React静态资源路径，根据实际目录调整
ProxyPass /static http://localhost:3000/static
ProxyPassReverse /static http://localhost:3000/static
ProxyPass /assets http://localhost:3000/assets
ProxyPassReverse /assets http://localhost:3000/assets

注意：该方法需要明确React项目的资源输出结构，若后续打包目录变化，需同步更新代理规则。

方案3：用RewriteRule实现路径转发 #

通过Apache的Rewrite模块，将所有/funds开头的请求转发到React服务的根路径，同时修正反向代理响应头：

RewriteEngine On
# 将/funds/xxx转发到localhost:3000/xxx
RewriteRule ^/funds/(.*)$ http://localhost:3000/$1 [P,L]
# 修正反向代理的响应头路径
ProxyPassReverse /funds/ http://localhost:3000/

该方案适合不想修改React配置的场景，但要求React项目的资源使用相对路径（若为绝对路径仍会加载失败）。

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