cors error

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

The error

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

What it means

Your frontend tried to call an API on a different domain, and that API is not configured to allow requests from your site.

Browsers enforce the Same-Origin Policy. Cross-origin fetches require the response to include an Access-Control-Allow-Origin header naming your origin. The API you’re calling either does not set that header at all, or sets it to a different origin.

The fix

Add ACAO on the API side — Next.js Route Handler
// app/api/data/route.ts
export async function GET() {
  return new Response(JSON.stringify({ ok: true }), {
    headers: {
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': 'https://yoursite.com',  // your site, NOT *
      'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
      'Access-Control-Allow-Headers': 'Content-Type, Authorization',
    },
  });
}

// Also handle preflight:
export async function OPTIONS() {
  return new Response(null, {
    status: 204,
    headers: {
      'Access-Control-Allow-Origin': 'https://yoursite.com',
      'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
      'Access-Control-Allow-Headers': 'Content-Type, Authorization',
    },
  });
}

Also check

Common adjacent root causes when the obvious fix doesn’t work.

  • 01Are you calling a third-party API that needs a server proxy? Browsers should call your backend; your backend calls the third party.
  • 02Is the API behind a Vercel/Cloudflare proxy that strips the headers? Check the proxy config.
  • 03If you set Access-Control-Allow-Origin: * with credentials, browsers reject it — a wildcard with credentials is a CORS error in itself.

Scan for related issues

This error is in our cors scanner. Run a free scan to find what else is misconfigured in the same area.

FAQ

Frequently asked questions

Why does the wildcard "*" not work for me?
Wildcard origins are allowed only without credentials. If you set Access-Control-Allow-Credentials: true, the Allow-Origin must echo a specific origin. Echoing requires server-side allowlisting; do not blindly reflect the request Origin header.
I set the header but still see the error. What gives?
The browser sends a preflight OPTIONS request first for non-simple requests. If your server doesn’t handle OPTIONS (returning 204 with the same headers), the actual request never fires. Check the Network tab for the OPTIONS row.

Related fixes

Tighten this area further

CORS allows all origins

An Access-Control-Allow-Origin: * policy lets any site call your API. Sometimes that is fine, often it is a mistake. Here is how to decide and fix it.

Read more

CORS credentials misconfiguration

Setting both Allow-Origin: * and Allow-Credentials: true is a dangerous misconfiguration. Here is why browsers block it and how to fix it correctly.

Read more

Background

Concepts

Cross-Origin Resource Sharing

CORS is a browser mechanism that controls which websites can call your API. Misconfigurations can open your app to cross-site attacks.

Read more