Apache 中 ProxyPass 怎么配置将根路径请求代理到前端单页应用-Apache-PHP中文网

apache中用proxypass代理根路径需启用mod_proxy和mod_proxy_http模块，配置proxypreservehost、proxypass及proxypassreverse，并结合mod_rewrite规则将非静态资源请求回退至index.html以支持前端路由。

apache 中 proxypass 怎么配置将根路径请求代理到前端单页应用

在 Apache 中用 ProxyPass 将根路径（/）代理到前端单页应用（如 React/Vue 构建的静态资源服务，运行在 http://localhost:3000），关键在于正确处理前端路由（client-side routing）和静态资源路径，避免 404 或循环重定向。

确保启用必要模块

Apache 必须加载 mod_proxy 和 mod_proxy_http。检查并启用（通常在 httpd.conf 或 apache2.conf 中）：

LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so
若需 WebSocket 支持（如开发服务器热更新），再加 mod_proxy_wstunnel

基础 ProxyPass 配置（适用于开发环境）

在虚拟主机或目录上下文中添加：

ProxyPreserveHost On
ProxyPass / http://localhost:3000/
ProxyPassReverse / http://localhost:3000/

说明：

CPA Update - Secure CLI Proxy API Maintenance

安全更新和维护 CLI Proxy API（CPA）部署与配置。用于 CPA 镜像升级、配置变更、认证目录兼容修复、上线验证与回滚。适用于用户提到“CPA 更新/升级/配置改了/容器重建/回滚”等场景。

下载

ProxyPreserveHost On：保留原始请求的 Host 头，让后端服务（如 create-react-app 的 dev server）能正确生成绝对链接
ProxyPass / ...：将所有以 / 开头的请求转发到前端服务
ProxyPassReverse / ...：重写响应头中的 Location、Content-Location 等 URL，防止重定向跳转到 localhost:3000

解决前端路由 404（HTML5 History 模式）

单页应用使用 history.pushState 时，直接访问 /user/123 会触发 Apache 查找对应文件，返回 404。需配合 mod_rewrite 回退到 index.html：

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ / [P,L]

注意点：

该规则必须放在 ProxyPass 之后（否则 [P] 会被覆盖）
!-f 和 !-d 表示“不是真实文件或目录”，才触发代理回根
[P] 标志表示用代理方式处理（等效于内部重写为 ProxyPass），[L] 终止后续规则

生产环境建议：静态资源优先，仅 fallback 到代理

若前端已构建为静态文件（如 build/ 目录），推荐先由 Apache 直接服务静态资源，仅对非文件路径代理到 SPA 入口：

DocumentRoot "/var/www/myapp/build"
<directory>
  Options Indexes FollowSymLinks
  AllowOverride None
  Require all granted
</directory><h1>所有不存在的路径都指向 index.html（由前端路由接管）</h1><p>RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /index.html [L]
</p>

此时无需 ProxyPass，更轻量、更安全；仅当需与后端 API 同域代理时，才额外配置 ProxyPass /api/ http://backend/。