配置Nginx的Content Security Policy仍拦截资源问题求助

问题根源 #

错误提示明确是connect-src规则限制了API请求，你当前的CSP配置未显式声明connect-src指令，因此它会默认继承default-src的规则：'self' data: blob:。若你的页面域名/端口与API请求的localhost:3000不一致，或请求路径不在'self'覆盖范围内，就会触发拦截。另外你提到不配置CSP仍有拦截，说明存在其他来源的CSP配置（比如前端框架、应用服务器、浏览器插件等自动注入的规则）。

修复方案 #

1. 补充connect-src指令到CSP配置 #

修改Nginx的CSP规则，显式添加connect-src允许目标API路径：

add_header Content-Security-Policy "default-src 'self' data: blob:; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src * data: blob:; font-src * data: blob:; frame-src *; connect-src 'self' http://localhost:3000/node-api/proxy/;";

如果所有API请求都属于同域，可简化为：

connect-src 'self';

2. 排查隐藏的CSP来源 #

既然不配置Nginx的CSP仍有拦截，需逐一检查：

• 前端index.html中是否存在<meta http-equiv="Content-Security-Policy">标签
• 应用服务器（如Node.js服务）是否在响应头中主动添加了CSP
• 浏览器插件是否强制注入了CSP规则
• 其他反向代理/CDN层是否配置了CSP

3. 正确使用Report-Only模式 #

若用Report-Only模式测试，需确保配置的是Content-Security-Policy-Report-Only头，该模式仅上报错误不会拦截请求：

add_header Content-Security-Policy-Report-Only "default-src 'self' data: blob:; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src * data: blob:; font-src * data: blob:; frame-src *; connect-src 'self' http://localhost:3000/node-api/proxy/;";

对已尝试操作的补充说明 #

• 不配置CSP仍拦截：说明存在第三方CSP源头，必须找到并修改对应配置
• 添加端口例外无效：可能是请求路径不匹配，或CSP规则被更高优先级的配置覆盖
• 全局例外无效：大概率是规则未正确生效，需检查配置是否被加载或存在语法错误

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