Refused to connect because it violates the Content Security Policy (connect-src)
Your UI loads, then every API call dies with a red CSP error naming connect-src. The page itself was allowed; the network call was not.
Read the error
Refused to connect to 'https://api.partner.example/v1/data' because it violates the
following Content Security Policy directive: "connect-src 'self'".The directive in quotes is the one that decided. If your header has no connect-src, the browser falls back to default-src — so a tight default-src 'self' silently covers fetch too.
What connect-src covers
| API | Covered by connect-src? |
|---|---|
fetch(), XMLHttpRequest | Yes |
WebSocket / wss: | Yes (scheme matters: wss: is not https:) |
EventSource (SSE) | Yes |
Navigator.sendBeacon | Yes |
<a ping> | Yes |
<img src> / <script src> | No — those are img-src / script-src |
CSS @import / fonts | No — style-src / font-src |
Fix it properly
- Allow the exact API origin (preferred):
Wildcards likeContent-Security-Policy: default-src 'self'; connect-src 'self' https://api.partner.example; object-src 'none'; base-uri 'none'https://*.partner.examplework for subdomains;https:alone allows every HTTPS host and defeats most of the point of connect-src. - Same-origin proxy. Have your own server call the partner API, and keep the browser on
'self'. Often cleaner for secrets and CORS as well (see CORS errors). - WebSockets. List
wss://api.partner.exampleexplicitly. Allowinghttps://api.partner.exampledoes not allowwss:. - Report-Only first. Ship the change as CSP-Report-Only and watch for surprise calls (analytics beacons, error trackers, feature flags) before enforcing.
Paste the full header into the CSP explainer and use Would this be allowed? with action “fetch / XHR” and your API URL to confirm. The free Anvil CSP API does the same check from a script.
Not the same as CORS
CSP connect-src is enforced by the calling page's browser policy. CORS is enforced using headers from the API response. You can pass one and fail the other. A connect-src block never reaches the network; a CORS failure reaches the server but hides the response from JavaScript. Fix the one the console names.
Related
TypeError: Failed to fetch · CSP header explainer · CSP Report-Only vs Enforce · Refused to execute inline script · CORS errors explained · CORS preflight failed · Mixed Content blocked · WebSocket connection failed
Questions
What does 'Refused to connect' with connect-src mean?
Your page's CSP does not allow that URL for fetch, XHR, WebSocket, beacon or EventSource. Add the origin to connect-src or proxy through your own host.
Why does default-src block my API?
If connect-src is omitted, the browser uses default-src as the fallback. A default-src 'self' policy therefore blocks cross-origin fetch.
Does allowing https://api.example cover WebSockets?
No. List wss://api.example (or ws: for local plain sockets) separately.
Is this a CORS error?
No. CORS failures mention Access-Control-Allow-Origin. CSP connect-src failures name the Content Security Policy directive and often never leave the browser.
Should I set connect-src *?
Almost never. Prefer an explicit allow-list of API hosts, or a same-origin backend proxy.
Published .