XAMPP多端口配置与CORS跨域设置详解

本文深入解析了XAMPP环境下多端口开发时CORS跨域问题的根本成因与完整解决方案，明确指出仅修改Apache端口无法解决跨域，必须同步启用mod_headers模块、在虚拟主机配置中精准设置Access-Control-Allow-*响应头，并显式放行OPTIONS方法——三者缺一不可；同时揭示了常见误区，如误用.htaccess、忽略预检请求405错误、缓存干扰及代理层头配置遗漏等，为前端与后端开发者提供了一套开箱即用、经实战验证的跨域配置范式。

XAMPP 默认不支持跨域，光改端口没用；必须启用 mod_headers 模块 + 正确配置响应头 + 放行 OPTIONS 方法，三者缺一不可。

为什么只改 Apache 端口（如 8080、8081）解决不了 CORS？

浏览器判断跨域依据是「协议 + 域名 + 端口」三者组合，改端口确实会让前端和后端变成不同源——但这只是触发 CORS 的条件，不是解决方案。真正卡住请求的，是服务器没返回合法的 Access-Control-Allow-Origin 等响应头，而这些头必须靠 mod_headers 模块才能设置。

常见错误现象：
前端发请求到 http://localhost:8080/api，控制台报 No 'Access-Control-Allow-Origin' header，但 Network 面板里响应状态是 200 ——说明请求通了，只是头没发出来。

• XAMPP 的 httpd.conf 默认注释掉了 LoadModule headers_module modules/mod_headers.so
• 不取消注释并重启 Apache，所有 Header set 配置都无效
• 即使你开了多个端口（比如 80、8080、8081），只要没加载这个模块，全端口都一样跨不过去

如何在多端口虚拟主机中分别配置 CORS 头

不能靠 .htaccess：XAMPP 默认禁用 Header 指令覆盖，直接放 .htaccess 会 500 错误。必须在 httpd-vhosts.conf 里为每个端口对应的 或 块里写。

例如，你用 8080 和 8081 两个端口跑不同项目：

<VirtualHost *:8080>
    DocumentRoot "X:/xampp/htdocs/project-a"
    <Directory "X:/xampp/htdocs/project-a">
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
        Header set Access-Control-Allow-Origin "http://localhost:3000"
        Header set Access-Control-Allow-Methods "GET, POST, OPTIONS, PUT, DELETE"
        Header set Access-Control-Allow-Headers "Content-Type, X-Requested-With, Authorization"
        Header set Access-Control-Allow-Credentials "true"
    </Directory>
</VirtualHost>

<VirtualHost *:8081>
    DocumentRoot "X:/xampp/htdocs/project-b"
    <Directory "X:/xampp/htdocs/project-b">
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
        Header set Access-Control-Allow-Origin "http://localhost:5173"
        Header set Access-Control-Allow-Methods "GET, POST, OPTIONS"
        Header set Access-Control-Allow-Headers "Content-Type"
    </Directory>
</VirtualHost>

• 生产环境必须写明确域名，"*" 不适用于带凭证（credentials: true）的请求
• 两个端口可以配不同白名单，互不影响
• 如果某个项目不需要凭证，Access-Control-Allow-Credentials 这行可删

为什么 OPTIONS 预检请求总返回 405 Method Not Allowed？

这不是 CORS 配置错了，是 Apache 默认拒绝 OPTIONS 方法。哪怕你加了所有 Header，只要没显式允许该方法，预检就失败。

在对应 或 块里加这一行即可：

Require method GET POST HEAD OPTIONS

• 不要只写 Require all granted ——它控制的是访问权限，不等于放开 HTTP 方法
• 如果你用了 mod_rewrite，还要检查有没有 RewriteRule 把 OPTIONS 重定向或 404 掉
• Chrome 控制台看到 405 时，点开 Network → 选中那个 OPTIONS 请求 → 查看 Response Headers，如果空空如也，基本就是这个原因

容易被忽略的缓存与调试陷阱

改完配置重启 Apache 后，浏览器可能还在用旧响应头——尤其当你之前测试过带 credentials 的请求，浏览器会缓存预检结果长达 24 小时。

• 开发阶段清空浏览器缓存，或用无痕窗口测试
• 临时禁用 Chrome 插件（特别是某些“跨域调试”类插件，它们会伪造响应头干扰判断）
• 用 curl -I http://localhost:8080/api 直接看原始响应头，绕过浏览器层干扰
• 如果用了反向代理（比如 Nginx 套在 Apache 前面），CORS 头得在代理层加，Apache 配置无效

最常漏掉的其实是第一件事：改完 httpd.conf 里的 mod_headers 注释，却忘记重启 Apache。所有后续操作都建立在这个前提上，它不生效，后面全是徒劳。

到这里，我们也就讲完了《XAMPP多端口配置与CORS跨域设置详解》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于XAMPP的知识点！