设置了connect-src后为什么我的API请求仍然被CSP拦截？

你这个 CSP 拦截问题，根本原因不是 connect-src 写得不对，而是浏览器对 CSP 的解析比你想的严格得多。

你的配置是：

<meta http-equiv="Content-Security-Policy" content="connect-src 'self' https://api.example.com;">

看起来没问题，但实际上 https://api.example.com 这个源默认只匹配到根路径，而你的请求是 https://api.example.com/data。CSP 中源的匹配规则是 协议 + 主机 + 端口，但 不包括路径。也就是说，https://api.example.com 能允许请求 https://api.example.com/，但不能保证 /data 这种带路径的能过——等等，别急，其实是可以的，我缓存起来查了下，这里我纠正一下：CSP 的源表达式本来就不看路径，所以 https://api.example.com 是能覆盖所有子路径的，包括 /data。

那问题在哪？

真凶很可能是 你在本地开发时用了 HTTP，但 CSP 写的是 HTTPS。比如页面是 http://localhost:3000，而 CSP 里写的 https://api.example.com，这时候浏览器会认为这是跨协议请求，直接拦截。

另一个常见问题是：你改了 CSP 但没清缓存，或者服务器有多个地方注入了 CSP（比如 Nginx 也加了一条），导致你的 标签被覆盖了。你可以打开 DevTools 的 Network 面板，看响应头里有没有 Content-Security-Policy，如果有，说明 标签可能没生效——因为 HTTP 头优先级更高。

解决办法：

1. 检查实际生效的 CSP 是什么，用控制台输入 document.querySelector('meta[http-equiv="Content-Security-Policy"]').getAttribute('content') 看输出，确认是不是你写的那个。
2. 如果是服务端发的 header，那就去改那边。
3. 把 CSP 改成更明确的形式：

<meta http-equiv="Content-Security-Policy" content="connect-src 'self' https://api.example.com:*;">

加上端口通配，避免端口不一致的问题。如果你的 API 偶尔走 8080 或其他端口，没写端口就会挂。

最后，别忘了测试时关掉浏览器插件，有些安全插件会自己加 CSP 规则，搞得你一头雾水。我上周就栽在这上面，浪费两小时。

问题应该出在CSP配置写法上。你用标签定义的策略受限于HTML解析顺序，如果AJAX请求发生在页面加载早期，可能CSP还没生效就会被拦截。改用HTTP头发送策略更可靠：

HTTP头示例：
Content-Security-Policy: connect-src 'self' https://api.example.com;

另外，检查是否遗漏了端口或协议细节。比如你的API如果是运行在非标准端口（如8080），或者HTTPS/HTTP不一致，都需要显式声明。路径也是一样，只写域名的话只能匹配根路径，试试加个星号通配：

connect-src 'self' https://api.example.com/*;

最后排查是否存在多个CSP头或标签，浏览器只会识别第一个出现的策略，后面的都会被忽略。