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

What it means in plain English

Browsers stop a web page from reading responses from another website unless that website says "this domain is allowed". That permission is the Access-Control-Allow-Origin header. Locally it may have worked because your origin was localhost.

Likely causes

• Your API/server allows localhost but not your production domain.
• The API never sends CORS headers (common for third-party APIs not meant to be called from browsers).
• The preflight OPTIONS request isn't handled (see the Supabase Edge Function page).
• A server crash returns an error page without CORS headers, so a 500 shows up as a CORS error.

How to fix it, step by step

1. Open DevTools → Console/Network and note which URL is blocked.
2. If you control that server: add your live origin, e.g. Access-Control-Allow-Origin: https://yourapp.com. Use * only for truly public APIs; it doesn't work with cookies/credentials. If you need several domains, echo back the request's Origin when it's on your allow list and add Vary: Origin.
3. If you don't control it: call it from your own backend instead of the browser (a Next.js route handler, Vercel/Netlify function or Supabase Edge Function), or proxy it. Netlify example in _redirects: /api/* https://api.example.com/:splat 200.
4. Keep API secret keys in that backend, not the browser.
5. Check server logs for crashes: fix the 500 and the 'CORS' error often disappears.

How to check it worked

• Reload; the Network request should succeed and the response include Access-Control-Allow-Origin.
• Test from the live domain, not just localhost.

Sources

• https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CORS/Errors/CORSMissingAllowOrigin (opens in a new tab)
• https://docs.netlify.com/routing/redirects/rewrites-proxies/ (opens in a new tab)