在本地搭建Strapi后端的同时，很多团队希望用XAMPP承载管理后台或演示页面，但XAMPP自带的Apache默认只监听80端口。要让Strapi运行在1337而前端资源走另一个端口，就必须给Apache增加监听端口并配置虚拟主机，使多个服务在同一台机器上并行且互不冲突。
一、理解XAMPP与Strapi的端口分工
Strapi是基于Node.js的无头CMS，启动后默认占用1337端口提供REST和GraphQL接口。XAMPP中的Apache则常用于托管PHP或静态资源，默认端口为80。若两者都用80，Strapi会因端口占用无法启动，因此让Apache监听额外端口是最直接的解决方案。
多端口的本质是操作系统允许一个Web服务器进程绑定多个TCP端口。Apache通过Listen指令声明要监听的端口号，再配合虚拟主机决定不同端口对应的文档根目录。这样浏览器访问http://localhost:8080时，Apache会返回指定目录内容，而Strapi依旧在1337响应API请求。
二、修改Apache主配置添加端口
打开XAMPP控制面板，点击Apache的Config按钮，选择httpd.conf。在文件靠近顶部找到已有的Listen 80，在其下方新增一行监听端口，例如8080。保存后该设置会让Apache在启动时报错以外多开一个套接字。
需注意如果系统启用了SSL，还应检查httpd-ssl.conf中是否占用了相同端口。修改完毕后必须重启Apache，否则新端口不会生效。以下为配置片段示例，其中转义了标签说明用的尖括号：
# 在 httpd.conf 中增加监听 Listen 80 Listen 8080 # 若需更多端口可继续添加 Listen 8081
三、配置虚拟主机绑定目录
仅仅监听端口还不够，Apache需要知道端口对应的文件路径。打开extra/httpd-vhosts.conf，为每个端口编写VirtualHost块。以下示例将8080指向Strapi管理面板构建后的静态文件，你也可以指向任意前端项目。
配置中DocumentRoot决定文件根目录，Directory块设置访问权限。Windows用户应注意路径使用正斜杠或转义反斜杠。配置完成后重启Apache，访问对应端口即可加载页面，而Strapi的node进程独立运行不需经过Apache。
<VirtualHost *:8080>
ServerName localhost
DocumentRoot "C:/xampp/htdocs/strapi-admin/dist"
<Directory "C:/xampp/htdocs/strapi-admin/dist">
Options Indexes FollowSymLinks
AllowOverride All
Require all granted
</Directory>
</VirtualHost>
四、启动Strapi并验证联通
进入Strapi项目目录，执行启动命令。Strapi默认读取config/server.js里的port字段，保持1337不变即可。它启动后监听Node服务，与Apache完全分离，因此不存在资源竞争。
验证时打开浏览器分别访问http://localhost:8080查看前端，http://localhost:1337/admin进入Strapi后台。若前端需调用接口，将请求基地址写成http://localhost:1337即可。下面给出Strapi启动与简单请求示例：
// 启动Strapi（开发模式）
// npx strapi develop
// 前端用fetch调用本地Strapi接口
fetch('http://localhost:1337/api/articles')
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.error(err));
五、常见问题与处理
端口被防火墙拦截是常见坑。Windows Defender可能阻止Apache新端口入站，需在高级防火墙设置中允许TCP 8080等端口。另外若提示权限不足，可尝试以管理员身份运行XAMPP。
另一个问题是浏览器缓存。配置变更后若页面未更新，请强制刷新或清缓存。若Strapi返回404，检查接口路径是否带/api前缀，以及Strapi是否已创建对应内容类型并开放权限。多端口方案成熟稳定，能显著提升本地协作效率。
| 服务 | 端口 | 用途 |
|---|---|---|
| Apache | 80 / 8080 | 静态资源与管理面板 |
| Strapi | 1337 | API与后台管理 |