CORSAPI

Blocked by CORS policy: No 'Access-Control-Allow-Origin' header

Access to fetch at 'https://api.example.com' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

In short: The browser refused to give your page the response because the API didn't say your site is allowed to read it.

Why it happens

CORS is enforced by the browser, using headers the server sends. Your frontend can't fix it alone. It happens when your app calls an API on a different domain (or port) that doesn't allow your origin, often only after deploy because the production URL wasn't added to the allow list. A failed preflight (OPTIONS) request causes it too, usually from custom headers like Authorization.

How to fix it

1. If you own the API: return Access-Control-Allow-Origin with your exact site origin (e.g. https://yourapp.com), and handle OPTIONS preflight with the allowed methods and headers.
2. If you send cookies, you also need Access-Control-Allow-Credentials: true, and the origin can't be *.
3. If you don't own the API: call it from your own server route (proxy) instead of the browser. Server-to-server calls aren't subject to CORS.
4. Check the Network tab: if the real request shows a 401/404/500, the CORS error is hiding a different failure.
5. Add your production and preview domains to the API's allowed origins, not just localhost.

Copy-paste fix prompt

I'm getting this error in my app:

Access to fetch at 'https://api.example.com' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

[Paste the full error, stack trace, and the file it points to here]

Likely cause: The browser refused to give your page the response because the API didn't say your site is allowed to read it.

Task: Determine whether I control the API being called. If yes, add correct CORS headers and OPTIONS handling for my exact origins. If no, create a small server-side proxy route. Show me which one you chose and why.

Rules:
- First explain the root cause in 2 sentences and list the files you'll change.
- Make the smallest change that fixes it. Don't refactor unrelated code.
- Don't disable security or checks (RLS, auth, signature verification, type checking, CORS allow-all) to make the error disappear.
- Never print or hard-code secret keys.
- Finish by telling me exactly how to verify the fix.

Common with: Cursor, Bolt, Lovable, Replit. Last reviewed 2026-11-13.