集成Google reCAPTCHA v2遇脚本加载失败，CSP配置无效求助

嘿，我来帮你排查这个头疼的问题！你遇到的情况其实挺常见——明明配置了CSP头却没生效，禁用CSP就正常工作，大概率是这几个细节没处理到位：

1. Nginx的add_header可能没在所有场景生效 #

Nginx默认只有在返回200/201/204/206/301/302/303/304/307/308这些状态码时，才会添加add_header定义的响应头。如果你的页面返回其他状态码（比如404、500），CSP头根本不会被发送给浏览器。

解决办法很简单，给add_header加上always参数，确保所有状态码都返回这个头：

add_header Content-Security-Policy "script-src 'self' 'unsafe-inline' https://www.google.com https://maps.googleapis.com https://www.gstatic.com" always;

验证方式：打开Chrome开发者工具的「Network」面板，查看页面请求的「Response Headers」，确认Content-Security-Policy是否存在。

2. 页面里可能有冲突的内联CSP meta标签 #

如果你的HTML页面中已经写了类似这样的meta标签：

<meta http-equiv="Content-Security-Policy" content="...">

浏览器会优先使用这个内联规则，而不是Nginx返回的响应头CSP，两者不会自动合并。如果meta里的规则没包含reCAPTCHA需要的域名，自然会触发加载拒绝。

解决办法：检查页面源码，要么移除这个冲突的meta标签，要么把reCAPTCHA依赖的域名加到meta的CSP规则里。

3. reCAPTCHA需要的CSP权限不全 #

你当前的script-src只加了google.com和gstatic.com，但实际reCAPTCHA还可能用到这些额外资源：

• 部分地区会调用https://recaptcha.net的资源
• 某些场景下需要unsafe-eval权限（官方虽尽量避免，但特殊情况仍需）
• 还要给样式和iframe授权，因为reCAPTCHA会加载内嵌样式和iframe

建议把CSP规则调整得更完整：

add_header Content-Security-Policy "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://www.google.com https://www.gstatic.com https://recaptcha.net; style-src 'self' 'unsafe-inline' https://www.gstatic.com; frame-src https://www.google.com https://recaptcha.net;" always;

4. 浏览器缓存了旧的CSP规则 #

有时候浏览器会缓存之前的响应头，导致新配置的CSP不生效。可以试试：

• 强制刷新页面（Ctrl+F5）
• 清空浏览器缓存后重新测试

先从这几个方向排查，应该能解决问题！

内容的提问来源于stack exchange，提问作者Molarro