Blocked by CORS policy

The browser hid a response from another site because that server never said your site is allowed to read it.

Browser console
Access to fetch at 'https://api.example.com/items' from origin 'http://localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Also appears as

  • Access to fetch at 'https://api.example.com/items' from origin 'http://localhost:5173' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
  • Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.example.com/items. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.

Prompt to fix it

My app shows "blocked by CORS policy" in the browser console. Find the request that fails. If it calls our own server, add CORS headers there: allow the app’s origins (localhost for development and the published domain), allow the methods and headers the request uses, and answer OPTIONS preflight requests with 204 before any auth check. If it calls a third-party API, move that call into a server route so the browser only talks to our backend, and keep any API key on the server. Don’t use mode: "no-cors".

Paste into Layerwise or any AI coding tool.

What it means

Browsers only let a page read responses from its own origin: the scheme, domain, and port in the address bar. When your app at http://localhost:5173 calls https://api.example.com, the request still goes out, but the browser hides the response unless the server answers with an Access-Control-Allow-Origin header that names your site. CORS (cross-origin resource sharing) is the set of headers a server uses to grant that permission.

So the fix belongs on the server you’re calling. Changes to the fetch call can’t grant permission, and mode: 'no-cors' only returns an empty response your code can’t read.

Requests that send JSON, an Authorization header, or a method like PUT or DELETE trigger a preflight: the browser first sends an OPTIONS request to ask for permission. If the server doesn’t answer it with the right headers, you get the preflight version of this error even when the real endpoint works.

Common causes

  • The app calls a third-party API straight from the browser, and that API only expects calls from servers.
  • Your own backend has no CORS setup, or it allows localhost but not the published domain.
  • The server doesn’t handle the preflight OPTIONS request, so requests with JSON bodies or auth headers fail.
  • The server crashed or redirected, and that error or redirect response carries no CORS headers.

How to fix it

  1. Open the Network tab, click the failed request, and note its URL and whether an OPTIONS request ran before it.
  2. If you own the server, return Access-Control-Allow-Origin with your app’s exact origin, plus Access-Control-Allow-Methods and Access-Control-Allow-Headers for what the request sends.
  3. Answer OPTIONS requests with status 204 and the same headers, before any sign-in check runs.
  4. If you don’t own the API, call it from a route on your own backend and have the page call that route. This also keeps the API key out of the browser.
  5. Add the published domain to the allowed origins along with localhost before you ship.

Example fix

const ALLOWED_ORIGINS = new Set([
  'http://localhost:5173',
  'https://my-app.com'
]);

export async function handle(request: Request) {
  const origin = request.headers.get('Origin') ?? '';
  const cors: Record<string, string> = ALLOWED_ORIGINS.has(origin)
    ? {
        'Access-Control-Allow-Origin': origin,
        'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE',
        'Access-Control-Allow-Headers': 'Content-Type, Authorization',
        Vary: 'Origin'
      }
    : {};

  // Answer the preflight before routing or auth runs.
  if (request.method === 'OPTIONS') {
    return new Response(null, { status: 204, headers: cors });
  }

  return Response.json({ items: [] }, { headers: cors });
}

Related errors

All errors
TypeError: Failed to fetch

Failed to fetch

The browser never got a usable response: the server was unreachable, or the browser blocked the request or its reply.

OpenAIError: It looks like you're running in a browser-like environment. This is disabled by default, as it risks exposing your secret API credentials to attackers. If you understand the risks and have appropriate mitigations in place, you can set the `dangerouslyAllowBrowser` option to `true`, e.g., new OpenAI({ apiKey, dangerouslyAllowBrowser: true }); https://help.openai.com/en/articles/5112595-best-practices-for-api-key-safety

It looks like you're running in a browser-like environment

The AI SDK refused to run in the browser, because your secret API key would be visible to anyone who opens the page.

GET https://api.example.com/items 401 (Unauthorized)

401 Unauthorized

The server couldn’t confirm who was calling: the request had no credentials, or its API key, session, or token was wrong or expired.

SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

Unexpected token '<', "<!DOCTYPE "... is not valid JSON

Your code expected JSON, but the server sent back an HTML page, usually a 404 page or your app’s own index.html.

Build with an agent that checks its work

The Layerwise agent clicks through the live preview and reads the console, so it catches errors before you do.

DownloadRead the docs