XAMPP配置多端口实现本地多CDN源模拟

这事儿能实现，但得讲究方法。单纯在 XAMPP 里开两个端口，比如 localhost:8080 和 localhost:8081，就想模拟出两个不同 CDN 的效果，这条路走不通。根源在于，浏览器的同源策略判定的是“协议 + 域名 + 端口”这个三元组。虽然端口不同，但域名都是 localhost，浏览器在安全策略上会特殊对待，视为同一来源。这样一来，你想测试的 CDN 核心场景——比如真正的域名级资源隔离、跨域行为（CORS）、SRI 校验——全都触发不了。

先说说常见的“翻车”现场：HTML 里明明写着 ，结果发现它走的还是主站的同源策略，压根不触发跨域逻辑。再打开 DevTools 的 Network 面板，所有请求都归到 localhost 名下，根本分不清哪个资源是来自“CDN 域 A”，哪个是来自“CDN 域 B”。如果你还想测试 SRI（Subresource Integrity）或 CSP 的 connect-src 规则，那更是直接匹配失败，完全起不到校验作用。

为什么不能只改端口来模拟多 CDN

CDN 的核心玩法是「不同域名」，不是换个端口就完事了。除非你真正拥有两个不同的域名指向你的本地服务，否则浏览器永远不会把它们当作两个独立的“源”。localhost:8080 和 localhost:8081 在浏览器看来，就像是同一个人的两个手机号，本质还是同一个人。你想要的并行加载、缓存分区、SRI 跨域验证这些行为，全都依赖真实的域名差异。

正确配置：域名 + 端口 + hosts 三件套

目标很明确：让 cdn1.local 指向 8080 端口目录，cdn2.local 指向 8081 端口目录，而且 Apache 能区分对待它们。这才是真实 CDN 域名映射的最小可行模拟。具体怎么做？以 Windows 为例（macOS 思路一样，路径微调即可）：

• 第一步：改 hosts 文件。打开 C:\Windows\System32\drivers\etc\hosts（需要管理员权限），在末尾添加两行：

  127.0.0.1 cdn1.local
  127.0.0.1 cdn2.local

• 第二步：启用虚拟主机。在 XAMPP\apache\conf\httpd.conf 中，找到这行代码：

  #Include conf/extra/httpd-vhosts.conf

  把前面的 # 去掉，改成：

  Include conf/extra/httpd-vhosts.conf

• 第三步：配置虚拟主机区块。打开 XAMPP\apache\conf\extra\httpd-vhosts.conf，在文件底部添加两个 块：

  
      ServerName cdn1.local
      DocumentRoot "X:/xampp/htdocs/cdn1"
      
          Require all granted
          AllowOverride None
      
  
  
  
      ServerName cdn2.local
      DocumentRoot "X:/xampp/htdocs/cdn2"
      
          Require all granted
          AllowOverride None
      
  

  注意：把 X: 换成你 XAMPP 安装的实际盘符，DocumentRoot 路径末尾不要加斜杠。
• 第四步：添加监听端口。回到 httpd.conf，在已有的 Listen 80 下面追加：

  Listen 8080
  Listen 8081

• 第五步：重启 Apache。重启后，在浏览器里输入 http://cdn1.local:8080/bootstrap.min.css 和 http://cdn2.local:8081/jquery.min.js 验证一下，看能不能正常返回文件。

Apache 版本差异与权限陷阱

这里有个容易踩的坑：XAMPP 5.6+（Apache 2.4）和更老的版本（2.2），权限指令语法完全不同。混着用，轻则报 403 禁止访问，重则直接 500 服务器错误。

• Apache 2.4（XAMPP 7.0+ 默认）：必须用 Require all granted。注意，Order deny,allow 和 Allow from all 已经废弃了，写上去反而会报错。
• Apache 2.2（老版本 XAMPP）：必须用 Order deny,allow + Allow from all。Require 语句它根本不认识。
• 怎么看自己用的哪个版本？在命令行里执行 XAMPP\apache\bin\httpd.exe -v，一目了然。
• 还有一个细节容易被忽略： 块里的路径必须和 DocumentRoot 路径完全一致（包括大小写、斜杠、盘符）。虽然 Windows 对大小写不敏感，但如果路径里包含空格或中文，很可能因为转义问题导致 403 错误。

验证 CDN 模拟是否生效

千万别只看页面能不能打开。真正的验证要看浏览器 DevTools 的 Network 面板：

• 发起请求时，URL 必须显示为 http://cdn1.local:8080/xxx.css，而不是 http://localhost:8080/xxx.css。
• 每个请求的 Remote Address 列应该显示对应的端口（比如 127.0.0.1:8080 或 127.0.0.1:8081）。
• 右键点击某个 CSS 请求，选择 “Open in Sources tab”，确认文件确实来自你指定的 cdn1 或 cdn2 目录，而不是默认的 htdocs。
• 如果你想测试跨域行为（比如 JSONP 或 CORS），一定要确保前端代码里用的是 cdn1.local:8080 和 cdn2.local:8081 作为资源地址，千万不要出现任何 localhost 的变体。

最容易被忽视的一个细节：修改 hosts 文件后，Chrome 或 Firefox 会缓存 DNS 映射。初次测试时，强烈建议用无痕窗口，或者进入 chrome://net-internals/#dns，点击 “Clear host cache” 清空 DNS 缓存。否则，你可能会折腾半天，结果发现浏览器还在走旧的解析路径。