Fix guides / CORS: "No 'Access-Control-Allow-Origin' header"

How to fix "No 'Access-Control-Allow-Origin' header is present on the requested resource"

Your front end calls your API and the browser console says it was blocked by CORS policy. The request may even work in Postman or curl. That is the clue: CORS is a browser rule, and the fix belongs on the server.

What is happening

Browsers block a page on one origin (for example https://myapp.vercel.app) from reading responses from another origin (https://api.myapp.com) unless the server says it is allowed, with an Access-Control-Allow-Origin header. For many requests the browser first sends an OPTIONS "preflight" request, and the server must answer that too.

Fix for an Express API

import cors from 'cors';
app.use(cors({
  origin: ['https://myapp.vercel.app', 'http://localhost:5173'],
  credentials: true
}));

Put it before your routes. List real origins rather than * if you send cookies or auth headers: browsers reject * together with credentials.

Fix for a Next.js route handler

const headers = {
  'Access-Control-Allow-Origin': 'https://myapp.vercel.app',
  'Access-Control-Allow-Methods': 'GET,POST,OPTIONS',
  'Access-Control-Allow-Headers': 'Content-Type, Authorization',
};
export async function OPTIONS() { return new Response(null, { status: 204, headers }); }
export async function POST(req) {
  const data = await req.json();
  return Response.json({ ok: true }, { headers });
}

If the front end and the API are the same Next.js app on the same domain, call a relative path like /api/thing and CORS does not apply at all.

Fix for a Supabase Edge Function

const corsHeaders = {
  'Access-Control-Allow-Origin': '*',
  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
};
Deno.serve(async (req) => {
  if (req.method === 'OPTIONS') return new Response('ok', { headers: corsHeaders });
  // ... your logic
  return new Response(JSON.stringify({ ok: true }), {
    headers: { ...corsHeaders, 'Content-Type': 'application/json' },
  });
});

Every response, including errors, needs the headers. A function that crashes returns a response without them, which shows up as a CORS error even though the real problem is the crash. Check the function logs.

Calling a third-party API from the browser?

If the API does not allow browser calls (many AI APIs do not, on purpose, to protect your key), you cannot fix it with headers on your side. Move the call to your own server route or edge function and have the browser call that instead. This also keeps your API key secret.

Last updated 2026-10-19.