Fix: CORS Error With fetch (No Access-Control-Allow-Origin)

The Error

Your frontend calls an API and the browser console shows:

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

The same request works in Postman or curl. That's the clue: CORS is enforced by browsers, not servers. The server must tell the browser that your site is allowed to read its responses. You can't fix CORS from frontend code alone.

🎯 Quick Fix

On the API server, return the right headers for your frontend's origin:

Access-Control-Allow-Origin: http://localhost:3000
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization

And make sure OPTIONS (preflight) requests return those headers with a 2xx status. If you don't control the API, call it from your own backend instead of the browser.

What CORS Actually Is

An origin is scheme + domain + port. http://localhost:3000 and http://localhost:8000 are different origins. Browsers block a page from reading responses from another origin unless that server opts in. CORS (Cross-Origin Resource Sharing) is the opt-in.

Preflight: for "non-simple" requests (JSON bodies, Authorization headers, PUT/DELETE), the browser first sends an OPTIONS request to ask permission.

Fixes by Server

Express (Node.js)

import cors from "cors";

app.use(cors({
  origin: ["http://localhost:3000", "https://myapp.com"],
  methods: ["GET", "POST", "PUT", "DELETE"],
  allowedHeaders: ["Content-Type", "Authorization"],
  credentials: true, // only if you send cookies
}));

Next.js Route Handler

// app/api/data/route.ts
const ALLOWED = "https://myapp.com";

const corsHeaders = {
  "Access-Control-Allow-Origin": ALLOWED,
  "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: corsHeaders });
}

export async function POST(req: Request) {
  const body = await req.json();
  return Response.json({ ok: true, body }, { headers: corsHeaders });
}

If your frontend and API are in the same Next.js app on the same domain, there's no CORS issue at all: call /api/data with a relative URL.

FastAPI (Python)

from fastapi.middleware.cors import CORSMiddleware

app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:3000"],
    allow_methods=["*"],
    allow_headers=["*"],
    allow_credentials=True,
)

Common Traps

When You Don't Control the API

Third-party APIs often don't allow browser calls (and putting their API keys in the browser would expose them anyway). Call them from your server:

Server-to-server requests aren't subject to CORS, and your API key stays secret.

Debugging Checklist

• Open DevTools → Network, find the OPTIONS request: does it return 2xx with CORS headers?
• Is Access-Control-Allow-Origin your exact origin (scheme, domain, port)?
• Using cookies? credentials: 'include' in fetch and Allow-Credentials: true with a non-wildcard origin
• Custom headers listed in Access-Control-Allow-Headers?
• Do error responses also include CORS headers?

Frequently Asked Questions

Conclusion

A CORS error means the API server didn't tell the browser your site may read its responses. Fix it on the server: return the exact allowed origin, handle OPTIONS preflight requests, include credentials headers when using cookies, and add CORS headers to error responses. If you don't control the API, call it from your own backend.

Sources

• MDN: Cross-Origin Resource Sharing (CORS)
• MDN: CORS errors reference
• Express: cors middleware
• FastAPI: CORS

Last verified: 2 November 2026.

Related reads: WebSocket vs SSE · JWT vs Session Auth · How to Use Environment Variables in Next.js

I write practical guides for developers. Follow on LinkedIn or X, or invite me to speak.