XAMPP配置多端口实现前后端分离部署-php教程-PHP中文网

直接修改httpd.conf和httpd-vhosts.conf即可运行，但必遇端口冲突、403错误、localhost失效三类问题：需改listen端口并同步servername、为每个virtualhost显式配置directory权限（require all granted）、且必须补全localhost的virtualhost以防被拦截。

xampp配置多端口实现前后端分离部署

直接改 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>
    DocumentRoot "D:/workspace/myapp-frontend"
    ServerName frontend.local
    <directory>
        AllowOverride All
        Require all granted
    </directory></virtualhost><virtualhost>
    DocumentRoot "D:/workspace/myapp-backend/web"
    ServerName backend.local
    <directory>
        AllowOverride All
        Require all granted
    </directory></virtualhost>

注意：Require all granted 是 Apache 2.4+ 必须项，Order deny,allow 在新版里已废弃，混用会导致 500 错误。

XAMPP 8.0.30

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></directory> 块是否含 Require all granted，且路径与实际一致（Windows 路径用正斜杠或双反斜杠）
localhost 失效是因为 Apache 关闭了默认主机：必须显式补上 localhost 的 VirtualHost，否则它会被第一个匹配的 *:876 拦截
在 httpd-vhosts.conf 最前面加一段：

<virtualhost>
    DocumentRoot "D:/xampp/htdocs"
    ServerName localhost
    <directory>
        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 视为不同源这件事——它们不会自动帮你打通。