# 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.

```text
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/pst_GLR5NR_X4sMoBrwaI7BylQ