XAMPP配置多端口实现本地微前端架构模拟-php教程-PHP中文网

XAMPP不支持微前端运行时沙箱、模块联邦或跨域通信机制，仅能通过多端口+虚拟主机粗略模拟独立部署子应用，需手动配置Listen、VirtualHost权限及跨端口通信方案。

xampp配置多端口实现本地微前端架构模拟

XAMPP 本身不支持微前端架构的运行时沙箱、模块联邦或跨域通信机制，但可以用多端口 + 虚拟主机粗略模拟「独立部署、独立访问」的子应用形态——前提是每个子应用是纯静态或带简单后端的 PHP/HTML 服务，且你手动处理跨端口通信限制。

Listen 指令必须显式声明所有目标端口

Apache 不会自动监听未在 httpd.conf 中声明的端口。只改 httpd-vhosts.conf 里的 <virtualhost></virtualhost> 是无效的，请求根本进不来。

打开 E:\XAMPP\apache\conf\httpd.conf（Windows）或 /opt/lampp/etc/httpd.conf（macOS），找到 Listen 80
在其下方新增行：Listen 8081、Listen 8082、Listen 8083……确保每个子应用端口都列出来
避免使用已被占用的端口：执行 netstat -ano | findstr :8081（Windows）或 lsof -i :8081（macOS）确认空闲
如果改完启动失败，错误日志里大概率出现 (OS 10013) An attempt was made to access a socket in a way forbidden by its access permissions —— 这是 Windows 防火墙或权限问题，需以管理员身份重启 XAMPP Control Panel

VirtualHost 必须配 `<directory></directory>` 权限块，否则 403 是必然结果

新版 XAMPP（5.6+）默认启用 Require all denied 全局策略，仅靠 DocumentRoot 和 ServerName 不足以让浏览器访问目录内容。

在 httpd-vhosts.conf 的每个 <virtualhost></virtualhost> 内，必须嵌套完整的 <directory></directory> 块
关键配置项必须包含：Require local（推荐）或 Require all granted（开发环境可接受）
不要沿用老教程里的 Order deny,allow + Allow from all，这是 Apache 2.2 语法，在 2.4+（XAMPP 7.4+ 默认）中已失效，会导致 500 错误

示例片段：

<virtualhost>
    ServerName localhost
    DocumentRoot "E:/XAMPP/htdocs/mfe-app1"
    <directory>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require local
    </directory></virtualhost>

跨端口子应用无法直接共享 Cookie 或 localStorage

浏览器把 localhost:8081 和 localhost:8082 视为完全不同的源（origin），所以：

前端开发

ys-agent 前端（frontend/）功能迭代的工程规范守门 skill。当任何 agent 接到 ys-agent 前端相关任务时——新增页面、新增组件、加 API、加 Pinia store、改路由、写 mock、调整布局、修改样式、对接后端接口、迁移 demo 代码、做主题、加权限、写公共组件、做数据可视化、做表单、做弹窗、做表格、做搜索过滤、调 Element Plus 用法、做响应式、做性能优化，或仅仅是在 frontend/ 目录下编辑任何 .vue / .ts / .scss / .c

下载

document.cookie、localStorage、sessionStorage 互不可见，无法天然实现「统一登录态」
主应用若用 iframe 加载子应用（如 src="http://localhost:8082"），子应用 JS 无法读取父窗口的 window.parent（同源策略拦截）
若需通信，只能走 postMessage，且双方都得主动加监听和校验 origin；不能依赖 fetch('/api/user') 这类相对路径，必须写全地址如 fetch('http://localhost:8083/api/user')
没有反向代理层时，主应用发起的跨端口请求会被浏览器标记为 CORS，后端需显式返回 Access-Control-Allow-Origin: http://localhost:8080

别忽略 `Include conf/extra/httpd-vhosts.conf` 是否启用

很多用户改了 httpd-vhosts.conf 却没生效，根本原因是 httpd.conf 里这行仍被注释着。

搜索 Include etc/extra/httpd-vhosts.conf（macOS）或 Include conf/extra/httpd-vhosts.conf（Windows）
删掉行首的 #，确保它是一行未注释的、可执行的 Include 指令
改完任意配置文件后，必须完整重启 Apache（不是“重新启动”按钮点一下就行，要先 stop 再 start）
重启失败时，直接看 E:\XAMPP\apache\logs\error.log 最末几行，比任何百度经验都准

真正难的不是配通端口，而是让多个端口上的子应用在无构建工具介入、无 runtime 沙箱的前提下，互相感知又彼此隔离——XAMPP 只提供 HTTP 服务基础，剩下的通信、加载、样式隔离、状态同步，全得你自己用 JS 补齐。别指望 httpd.conf 里加几行就能跑通 Module Federation。