Content Security Policy error

page-4e6410df2a237391.js:1 Refused to connect to 'http://localhost:8000/query' because it violates the following Content Security Policy directive: "connect-src 'self' https://api.example.com". o @ page-4e6410df2a237391.js:1 onKeyPress @ page-4e6410df2a237391.js:1 i8 @ 4bd1b696-c023c6e3521b1417.js:1 (anonymous) @ 4bd1b696-c023c6e3521b1417.js:1 nz @ 4bd1b696-c023c6e3521b1417.js:1 sn @ 4bd1b696-c023c6e3521b1417.js:1 cc @ 4bd1b696-c023c6e3521b1417.js:1 ci @ 4bd1b696-c023c6e3521b1417.js:1Understand this error page-4e6410df2a237391.js:1 Fetch API cannot load http://localhost:8000/query. Refused to connect because it violates the document's Content Security Policy. o @ page-4e6410df2a237391.js:1 onKeyPress @ page-4e6410df2a237391.js:1 i8 @ 4bd1b696-c023c6e3521b1417.js:1 (anonymous) @ 4bd1b696-c023c6e3521b1417.js:1 nz @ 4bd1b696-c023c6e3521b1417.js:1 sn @ 4bd1b696-c023c6e3521b1417.js:1 cc @ 4bd1b696-c023c6e3521b1417.js:1 ci @ 4bd1b696-c023c6e3521b1417.js:1Understand this error page-4e6410df2a237391.js:1 Error querying RAG API: TypeError: Failed to fetch. Refused to connect because it violates the document's Content Security Policy. at o (page-4e6410df2a237391.js:1:3569) at onKeyPress (page-4e6410df2a237391.js:1:5171) at i8 (4bd1b696-c023c6e3521b1417.js:1:135363) at 4bd1b696-c023c6e3521b1417.js:1:141449 at nz (4bd1b696-c023c6e3521b1417.js:1:19197) at sn (4bd1b696-c023c6e3521b1417.js:1:136596) at cc (4bd1b696-c023c6e3521b1417.js:1:163598) at ci (4bd1b696-c023c6e3521b1417.js:1:163420)

You're getting this error because your **Content Security Policy (CSP)** is blocking your frontend from making a request to `http://localhost:8000/query`. --- ### ✅ Why It's Happening Your browser enforces a **Content Security Policy** defined by your site, which contains something like: ``` connect-src 'self' https://api.example.com; ``` This means the page is only allowed to make API requests to: - The same domain (`'self'`) - `https://api.example.com` But your code is trying to fetch from: ``` http://localhost:8000/query ``` Because `http://localhost:8000` is **not listed in connect-src**, the browser refuses and throws: > **Refused to connect because it violates the document's Content Security Policy.** --- ### ✅ How to Fix It You have three options depending on your setup: --- #### ✅ **1. Update Your CSP to Allow localhost (Development Only)** If you're using Next.js, you can update `next.config.js`: ```js const securityHeaders = [ { key: "Content-Security-Policy", value: ` default-src 'self'; script-src 'self'; connect-src 'self' http://localhost:8000 https://api.example.com; `.replace(/\s{2,}/g, ' ').trim(), }, ]; module.exports = { async headers() { return [ { source: "/(.*)", headers: securityHeaders, }, ]; }, }; ``` Then restart your dev server. --- #### ✅ **2. Use a Proxy Instead of Calling localhost Directly** Instead of calling `http://localhost:8000/query` from the frontend, set up a proxy API route in Next.js: **`pages/api/query.js`** ```js export default async function handler(req, res) { const response = await fetch("http://localhost:8000/query", { method: req.method, headers: { "Content-Type": "application/json" }, body: JSON.stringify(req.body), }); const data = await response.json(); res.status(200).json(data); } ``` And your frontend calls: ```js fetch('/api/query', { method: 'POST', body: JSON.stringify({ message }), }); ``` Since this is same-origin, CSP won’t block it. --- #### ✅ **3. Deploy the RAG API to a Public URL** If this is a production build, localhost won’t work at all. You must: - Deploy `http://localhost:8000` (your RAG backend) to a hosted URL - Then whitelist it in `connect-src` like: ``` connect-src 'self' https://your-rag-api.com https://api.example.com; ``` --- ### ✅ Summary | Problem | Solution | |--------------------------------------|----------------------------------------| | CSP blocks localhost | Add `http://localhost:8000` to CSP | | You don’t want to change CSP | Use a Next.js proxy route (`/api/*`) | | You're in production | Deploy backend & whitelist its domain | --- Would you like me to generate the exact code modification for your CSP setup or API proxy route?