因XAMPP默认未启用mod_headers模块（被注释），导致Header指令不生效；需取消httpd.conf中#LoadModule headers_module modules/mod_headers.so的注释，再在对应VirtualHost内配置CSP头，且确保无PHP输出干扰、端口策略独立、缓存已清除。

为什么加了多端口后CSP不生效

因为XAMPP默认没启用HTTP头模块，mod_headers 被注释掉了，哪怕你在 httpd-vhosts.conf 里写了 Header set Content-Security-Policy，Apache也根本不会处理。必须先启用模块，再配置头信息。

• 打开 D:\xampp\apache\conf\httpd.conf（Windows）或 /Applications/XAMPP/etc/httpd.conf（macOS）
• 搜索 mod_headers，找到这行：#LoadModule headers_module modules/mod_headers.so
• 删掉开头的 #，保存
• 确保 mod_rewrite 也已启用（CSP常配合重写规则做动态策略）

在虚拟主机中正确设置CSP头

不能在全局 httpd.conf 里硬写 Header 指令——它会作用于所有端口和站点，容易冲突；应该按端口/域名粒度，在对应 <virtualhost></virtualhost> 块内配置。

XAMPP 8.0.30

XAMPP 8.0.30 是一款免费、开源的跨平台 Web 服务器集成包，专为快速搭建本地 PHP 开发环境而设计。该版本核心组件包括：Apache 2.4.56、MySQL 8.0.33、PHP 8.0.30、phpMyAdmin 5.2.1 等。它支持 Windows、Linux 和 macOS 系统，可让开发者在个人电脑上轻松模拟服务器环境，无需复杂配置即可运行 WordPress、Thin

下载

• 在 D:\xampp\apache\conf\extra\httpd-vhosts.conf 的目标 <virtualhost></virtualhost> 内添加：
• Header always set Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data:;"
• 注意：Header 必须放在 <directory></directory> 块**外部**、 内部，否则 Apache 启动报错 Invalid command 'Header'
• 如果项目用 Vue/React 开发服务器代理（如 localhost:5173），需显式加 connect-src 'self' http://localhost:5173

多端口下CSP常见失效场景

不是加了头就万事大吉。端口切换时，浏览器缓存旧响应头、本地开发工具未刷新、甚至XAMPP自带的PHP脚本输出干扰，都会让CSP看似“没起作用”。

• Chrome DevTools → Network → 点开任意请求 → Response Headers 查看是否真有 Content-Security-Policy 字段
• 用 curl -I http://localhost:8080 验证原始响应头，排除浏览器缓存干扰
• 若页面含 PHP 输出（比如 echo "xxx"; 在 header() 之前），会导致 header 发送失败，CSP丢弃——把所有 header() 或 Apache Header 指令放在 PHP 输出前
• 多个 <virtualhost></virtualhost> 共享同一 DocumentRoot 但不同端口时，务必确认每个端口的 CSP 策略独立配置，不要复用粘贴漏改端口号

调试CSP违规而不阻断页面

直接上 block-all-mixed-content 或 default-src 'none' 容易让整个页面白屏。开发阶段建议先用 report-only 模式收集问题。

• 把 Content-Security-Policy 换成 Content-Security-Policy-Report-Only
• 加 report-uri /csp-report.php（需自己写个接收脚本）或用在线服务如 https://csp-reporting.com
• 注意：XAMPP 默认禁用 AllowOverride All，如果用 .htaccess 写 report-only，要先在 <directory></directory> 块里放开权限
• Firefox 对 report-uri 支持较弱，优先用 Chrome + DevTools → Console 查看 CSP violation 日志

CSP 是逐请求生效的 HTTP 头，不是全局开关；多端口意味着你得为每个 <virtualhost></virtualhost> 单独验证模块启用、头语法、路径权限三者是否同时成立——少一个，CSP 就静默失效。