xampp的apache默认不启用mod_proxy和mod_proxy_http模块,必须取消httpd.conf中对应loadmodule行的注释、重启服务,并在httpd-vhosts.conf中配置proxypass与proxypassreverse规则,路径斜杠需严格一致且禁用缓存。

Apache 在 XAMPP 里默认不支持反向代理,直接写 ProxyPass 会报错或静默失效;必须手动启用模块、配虚拟主机、重启服务,三步缺一不可。
必须启用的 Apache 模块有哪些
只开 mod_proxy.so 不够,mod_proxy_http.so 才是转发 HTTP 请求的核心。Webpack Dev Server 启动在 http://localhost:3000 这类地址时,缺它就 503 或 404。
打开 C:\xampp\apache\conf\httpd.conf(Mac 对应路径为 /Applications/XAMPP/xamppfiles/etc/httpd.conf),确认以下两行前面没有 #:
LoadModule proxy_module modules/mod_proxy.so LoadModule proxy_http_module modules/mod_proxy_http.so
若你用 Webpack 的 HTTPS 代理(比如 devServer.https: true),还需启用:
LoadModule proxy_connect_module modules/mod_proxy_connect.so
并加 SSLProxyEngine on 到虚拟主机配置里,否则连接直接被拒绝。
ProxyPass 规则必须写在 httpd-vhosts.conf 里
别往 .htaccess 或 httpd.conf 底部硬塞规则——ProxyPass 只在服务器级或 <virtualhost></virtualhost> 上下文中生效,且写在主配置里难维护、易冲突。
编辑 C:\xampp\apache\conf\extra\httpd-vhosts.conf,新增一个块:
<virtualhost>
ServerName localhost
ProxyRequests Off
<proxy>
Require all granted
</proxy>
ProxyPreserveHost On
ProxyPass /api/ http://localhost:3000/api/
ProxyPassReverse /api/ http://localhost:3000/api/
</virtualhost>
关键点:
Apache Superset 是一个广泛采用的开源 BI 平台,用于 SQL 探索、图表构建和仪表板交付。当代理需要查询仓库数据、组装仪表板或使用成熟的分析界面解释指标而不是临时笔记本代码时,此技能非常有用。
-
ProxyPreserveHost On:让后端 Webpack Dev Server 收到的Host头仍是localhost,否则 Express/Koa 路由可能匹配失败 - 路径末尾斜杠必须对齐:
/api/→http://localhost:3000/api/;若目标不带/,/api/user会被拼成/apiuser,直接 404 -
ProxyPassReverse必须和ProxyPass完全一致:它重写响应头里的Location和Set-Cookie,否则登录跳转或鉴权 cookie 会指向:3000端口
为什么前端访问 /api/xxx 仍跨域失败
不是代理没生效,而是浏览器看到的是 localhost:80 发起的请求,但响应头里没带 CORS —— Apache 默认不自动加,得自己补或交由后端控制。
如果只是本地开发调试,可在 <virtualhost></virtualhost> 块内加:
<ifmodule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "GET,POST,OPTIONS,PUT,DELETE"
Header set Access-Control-Allow-Headers "Content-Type,X-Requested-With,Authorization"
</ifmodule>
但更稳妥的做法是:让 Webpack Dev Server 自己返回正确 CORS 头(通过 devServer.headers 配置),Apache 只做纯路径转发。代理层不该承担接口级权限逻辑,否则上线后行为不一致。
Webpack Dev Server 必须监听非 80 端口且真实运行
XAMPP 的 Apache 已占 :80,Webpack Dev Server 再监听 :80 必然报 EADDRINUSE。必须显式指定其他端口,例如:
webpack serve --port 3000 --host localhost
验证是否真在跑:
- 终端执行
curl http://localhost:3000/health(假设有该接口) - 或直接浏览器访问
http://localhost:3000,看是否返回 Webpack 的欢迎页或资源 - 别用 XAMPP 控制面板自带的 Shell 启动——它不加载系统 PATH,
webpack命令常找不到
最后重启 Apache:XAMPP 控制面板点 Stop,再点 Start,不能只 reload 配置。
最容易被忽略的是模块启用后没重启 Apache,以及 ProxyPassReverse 缺失导致重定向跳到后端端口——这两处一出问题,现象就是“看起来代理通了,但登录后跳错页面、Cookie 不生效”。










