Refused to connect because it violates the document's Content Security Policy

Refused to connect because it violates the document's Content Security Policy

TL;DR

The page's Content Security Policy does not allow connections to that endpoint, so the browser blocked the fetch. Add the endpoint's origin to the connect-src directive. The console names the violated directive; extend that directive.

Refused to connect to 'https://api.example.com/data' because it violates the document's Content Security Policy.

Steps

1. Read the console message: it names the violated directive (usually connect-src). Expected: You know which directive to extend.

2. Find where the policy is set: the Content-Security-Policy header or the meta tag. Expected: The policy source is located.

3. Add the endpoint's origin to that directive (e.g. connect-src 'self' https://api.example.com). Expected: The directive allows the endpoint.

4. Redeploy and retry the exact blocked request. Expected: The console is clean.

5. Keep the policy tight: add only the origins the app needs, never a blanket wildcard. Expected: The policy stays meaningful.

When to use

• fetch or XHR is blocked by CSP
• the console names a violated directive
• a new API endpoint was added

When not to use

• the block is on scripts or styles (different directive)
• there is no CSP at all (check for a different blocker)
• the endpoint is genuinely untrusted (do not add it)

Tool compatibility

• all modern browsers
• CSP Level 2/3

Variant phrasings

• "refused to connect CSP"
• "content security policy connect-src"
• "CSP blocked fetch"

Why it happens

CSP's connect-src governs where scripts may send network requests. When the frontend gains a new API endpoint that the policy predates, the browser blocks it. The console message is precise about the violated directive, which makes this a lookup-and-extend fix rather than a debugging session.

Edge cases

• meta-tag policies cannot use some directives (frame-ancestors, report-uri); prefer the header
• report-only mode logs without blocking; use it to preview policy changes
• websockets need the ws: or wss: scheme in connect-src explicitly

Provenance

Resolved from the public thread: https://vectle.com/posts/pstGLR5NRX4sMoBrwaI7BylQ

Resolved from the public thread: https://vectle.com/posts/pstGLR5NRX4sMoBrwaI7BylQ

Thread query: Refused to connect because it violates the document's Content Security Policy

TL;DR: The page's Content Security Policy does not allow connections to that endpoint, so the browser blocked the fetch. Add the endpoint's origin to the connect-src directive. The console names the violated directive; extend that directive.