XAMPP VHosts端口转发异常：公网访问/ace仅显示静态HTML

问题分析 #

当前反向代理配置仅转发了主路径，但页面内的静态资源（JS、CSS、图片等）路径未正确映射。公网访问时，浏览器会尝试从server.com根目录加载资源，而非server.com/ace路径，导致资源加载失败，仅显示纯HTML结构。

解决方案 #

1. 启用必要的Apache模块 #

首先确保XAMPP的Apache配置文件httpd.conf中加载了以下模块（去掉行首的注释符#）：

LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so
LoadModule proxy_html_module modules/mod_proxy_html.so
LoadModule xml2enc_module modules/mod_xml2enc.so

2. 修改虚拟主机配置（httpd-vhosts.conf） #

更新你的虚拟主机配置，添加资源路径重写规则：

<VirtualHost *:80>
    ServerName server.com
    ProxyRequests Off
    ProxyPreserveHost On

    # 转发/ace路径到本地7777端口的对应程序
    ProxyPass "/ace" "http://localhost:7777/ace"
    ProxyPassReverse "/ace" "http://localhost:7777/ace"

    # 重写HTML中的资源路径，将本地地址替换为公网代理路径
    ProxyHTMLURLMap http://localhost:7777/ace /ace

    # 处理Cookie域名，避免登录或会话问题（如果程序用到Cookie）
    ProxyPassReverseCookieDomain localhost server.com

    # 确保HTML编码处理正常，避免乱码
    RequestHeader unset Accept-Encoding
    ProxyHTMLCharsetOut *
</VirtualHost>

3. 重启Apache服务 #

修改配置后，在XAMPP控制面板中重启Apache服务，使配置生效。

替代方案（无需修改Apache模块） #

如果你不想启用额外模块，也可以直接修改程序中的资源引用路径：

• 将所有绝对路径（如/js/app.js）改为相对路径（如./js/app.js）
• 或者将资源路径改为以/ace/开头（如/ace/js/app.js）

这样浏览器会自动从server.com/ace/路径下加载资源，无需Apache额外处理。

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