XAMPP多端口配置，实现微前端模拟

XAMPP虽无法原生支持微前端所需的运行时沙箱、模块联邦或跨域通信机制，但可通过手动配置多端口监听、虚拟主机权限及跨源通信方案，粗略模拟子应用独立部署与访问的形态；然而这一过程需精准修改httpd.conf中的Listen指令、在httpd-vhosts.conf中为每个端口配置带Require local等权限控制的VirtualHost块、启用正确的Include路径，并彻底解决跨端口下的Cookie隔离、localStorage不共享、iframe同源限制及CORS问题——本质上，XAMPP只提供HTTP服务底座，所有微前端核心能力都依赖开发者用原生JS和HTTP策略自行补全。

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

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

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

• 打开 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 必须配 权限块，否则 403 是必然结果

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

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

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

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

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

• 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。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~