React生产应用经Apache反向代理/test_app路径访问时静态资源加载失败，直连3000端口正常

故障根因 #

两类配置不匹配共同触发了资源加载异常：

1. React生产构建的homepage配置为根路径/，打包生成的index.html文件中，所有JS、CSS静态资源的引用路径全部为/static/xxx形式，完全没有携带/test_app访问前缀。这类不带前缀的请求不会命中Apache的反向代理规则，会被默认路由到80端口的Apache本地服务，而非转发到3000端口的React应用，最终触发静态资源404错误，和观察到的异常现象完全匹配。
2. 现有Apache反向代理配置仅写了单条ProxyPass规则，缺少路径映射、响应重写、请求头透传的配套配置，即使资源路径修正后，也可能出现后端重定向路径错误、Cookie设置失效等次生问题。

分步修复操作 #

1. 调整React项目构建配置 #

• 修改项目根目录package.json中的homepage字段，将原有值/替换为/test_app/
• 如果项目使用BrowserRouter实现前端路由，需要在路由初始化时指定匹配的基路径，避免路由跳转时路径错位：

  <BrowserRouter basename={process.env.PUBLIC_URL}>
    {/* 业务路由配置 */}
  </BrowserRouter>
  

• 修改完成后必须重新执行生产构建命令（如npm run build）生成新的构建产物。homepage配置仅在项目构建阶段生效，不重新构建的话，旧产物中的静态资源路径不会发生任何变化，配置调整完全不生效。

2. 完善Apache反向代理配置 #

替换原有简陋的ProxyPass规则为完整可运行的配置块：

# 关闭正向代理能力，仅保留反向代理
ProxyRequests Off

# 路径映射规则：规则两侧同时配置尾斜杠，自动完成前缀路径到应用根路径的映射
# 例：请求https://my_server.com/test_app/static/js/app.js 将被转发到 http://localhost:3000/static/js/app.js
ProxyPass /test_app/ http://localhost:3000/
ProxyPassReverse /test_app/ http://localhost:3000/

# 透传请求头，让React应用感知外部访问的实际协议与路径前缀
RequestHeader set X-Forwarded-Proto "https"
RequestHeader set X-Forwarded-Prefix "/test_app"
# 修复反向代理下Cookie路径不匹配问题
ProxyPassReverseCookiePath / /test_app/

配置修改完成后，先执行apachectl configtest校验配置语法，确认无报错后重载Apache服务使配置生效。

常见踩坑提醒 #

• 反代规则的路径与后端地址两侧必须保持尾斜杠一致，否则会出现路径拼接错误。例如规则写为ProxyPass /test_app http://localhost:3000/时，请求/test_app/home会被错误转发为http://localhost:3000/homehome，触发应用路由404。
• 测试访问时需要先清除浏览器缓存，旧缓存中存储的无/test_app前缀的静态资源引用会持续触发加载失败，即使配置已经修正也无法正常打开页面。
• 无需额外添加mod_rewrite重写规则，只要路径映射逻辑正确，即可正常转发请求，过度配置重写规则反而容易导致路径二次改写的问题。

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