直接修改httpd.conf和httpd-vhosts.conf即可运行，但必遇端口冲突、403错误、localhost失效三类问题：需改Listen端口并同步ServerName、为每个VirtualHost显式配置Directory权限（Require all granted）、且必须补全localhost的VirtualHost以防被拦截。
直接改 httpd.conf 和 httpd-vhosts.conf 就能跑通，不用装额外代理或重写规则；但端口冲突、403 错误、localhost 失效这三类问题几乎必踩。
修改 Apache 监听端口避免 80 冲突
Windows 下 XAMPP 启动失败常因 Skype、IIS 或其他服务占了 80 端口。不建议强行杀进程，而是换端口更稳妥：
- 打开
D:\xampp\apache\conf\httpd.conf，找到Listen 80，改成Listen 876（或其他未被占用的端口，如 8080、8001） - 确保同一文件中
ServerName localhost:80也同步改为ServerName localhost:876，否则 Apache 启动会报错 - 改完保存，重启 Apache；浏览器访问
http://localhost:876应该能看到 XAMPP 欢迎页
用 VirtualHost 绑定不同端口和目录
一个端口不能同时指向两个根目录，所以必须靠多端口 + 多 VirtualHost 实现前后端物理分离：
- 确认
D:\xampp\apache\conf\httpd.conf中已启用Include conf/extra/httpd-vhosts.conf（去掉行首#） - 在
D:\xampp\apache\conf\extra\httpd-vhosts.conf末尾追加两段（示例用 876 和 8001）：
<VirtualHost *:876>
DocumentRoot "D:/workspace/myapp-frontend"
ServerName frontend.local
<Directory "D:/workspace/myapp-frontend">
AllowOverride All
Require all granted
</Directory>
</VirtualHost>
<VirtualHost *:8001>
DocumentRoot "D:/workspace/myapp-backend/web"
ServerName backend.local
<Directory "D:/workspace/myapp-backend/web">
AllowOverride All
Require all granted
</Directory>
</VirtualHost>
注意：Require all granted 是 Apache 2.4+ 必须项，Order deny,allow 在新版里已废弃，混用会导致 500 错误。
XAMPP 8.0.30 是一款免费、开源的跨平台 Web 服务器集成包，专为快速搭建本地 PHP 开发环境而设计。该版本核心组件包括：Apache 2.4.56、MySQL 8.0.33、PHP 8.0.30、phpMyAdmin 5.2.1 等。它支持 Windows、Linux 和 macOS 系统，可让开发者在个人电脑上轻松模拟服务器环境，无需复杂配置即可运行 WordPress、Thin
解决访问时 403 Forbidden 或 localhost 打不开
改完虚拟主机后常见两个现象：一是所有地址都 403，二是 localhost 反而打不开了——本质是 Apache 默认只认 DocumentRoot，不认你新加的 VirtualHost：
- 403 错误大概率因目录权限未放开：检查
httpd-vhosts.conf里每个<Directory>块是否含Require all granted，且路径与实际一致（Windows 路径用正斜杠或双反斜杠） - localhost 失效是因为 Apache 关闭了默认主机：必须显式补上
localhost的VirtualHost，否则它会被第一个匹配的*:876拦截 - 在
httpd-vhosts.conf最前面加一段：
<VirtualHost *:876>
DocumentRoot "D:/xampp/htdocs"
ServerName localhost
<Directory "D:/xampp/htdocs">
AllowOverride All
Require all granted
</Directory>
</VirtualHost>
这样 http://localhost:876 就恢复可用，且不影响你自定义的 frontend.local:876 和 backend.local:8001。
前端请求后端接口时的跨域和路径问题
前后端分端口部署后，浏览器同源策略会拦截 http://frontend.local:876 → http://backend.local:8001 的请求，这不是 Apache 配置能绕过的：
- 开发阶段最简单方案：前端代码里把 API 地址写死为
http://localhost:8001（不是backend.local），并确保 hosts 文件有127.0.0.1 backend.local - 如果必须走域名，需在后端响应头加
Access-Control-Allow-Origin: http://frontend.local:876，Apache 本身不处理跨域，这是后端逻辑或中间件的事 - 上线前别依赖多端口方案：真实环境应统一走 80/443，用 Nginx 反向代理做路径级分发（比如
/api/→ 后端，其余 → 前端静态文件），端口暴露太多反而增加防火墙配置和安全风险
真正麻烦的从来不是配几个端口，而是前端构建产物里的资源路径（如 publicPath）、后端接口 baseURL、以及浏览器对 localhost:876 和 localhost:8001 视为不同源这件事——它们不会自动帮你打通。
