← All errors

CORS error: blocked by CORS policy

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 one sentence: The browser blocked your request because the server you called didn't say your site is allowed to read its response.

What it means

CORS (Cross-Origin Resource Sharing) is a browser safety rule. When your page on one domain calls an API on another domain, the browser only lets your code read the response if the API replies with an `Access-Control-Allow-Origin` header that permits your site.

The important part: CORS is fixed on the server you are calling, not in your frontend fetch code. Adding headers to your own request does not help.

Common causes

• You're calling a third-party API directly from the browser and it doesn't allow browser requests.
• Your own backend doesn't send CORS headers, or allows a different origin (e.g. your production domain but not localhost).
• A preflight OPTIONS request fails because the server doesn't handle OPTIONS or rejects a custom header like Authorization.
• The server actually crashed (500) and the error page has no CORS headers, so it shows up as a CORS error.

How to fix it

1. If it's your own API: add the CORS headers there (allow your exact origin, the methods you use, and headers like Content-Type and Authorization), and answer OPTIONS requests.
2. If it's a third-party API: call it from your server instead (a Next.js route handler, Supabase Edge Function, etc.) and have the browser call your server. This also keeps API keys out of the browser.
3. Check the Network tab: if the real status is 500 or 404, fix that first.
4. Don't use `mode: 'no-cors'`; it hides the response from your code entirely.

// app/api/weather/route.ts — proxy the third-party API through your server
export async function GET() {
  const r = await fetch("https://api.example.com/data", {
    headers: { Authorization: `Bearer ${process.env.EXAMPLE_API_KEY}` },
  });
  return Response.json(await r.json(), { status: r.status });
}
// in the browser: fetch("/api/weather")

Prompt to paste into your AI tool

I get a CORS error calling an external API from the browser. Move the call into a server-side route that the frontend calls instead, keep the API key server-side, and don't use mode 'no-cors'.

Related errors

• TypeError: Cannot read properties of undefined
• Hydration failed: server HTML didn't match the client (Next.js)
• Module not found: Can't resolve '...'
• Supabase: new row violates row-level security policy