Fix CORS Error: 'No Access-Control-Allow-Origin header is present'

CORS errors confuse everyone because the message appears in the *browser*, but the fix lives on the *server*. Your frontend on one origin is calling an API on another, and the API never told the browser it is allowed. Let's fix it properly — not with a fragile browser extension.

What CORS Actually Is

Same-Origin Policy stops a page on origin A from reading responses from origin B unless B opts in with Access-Control-Allow-Origin. For anything beyond a simple GET, the browser first sends a preflight OPTIONS request — which your server must also answer.

Fix in Express / Node.js

const cors = require("cors");

app.use(cors({
  origin: "https://app.example.com", // not "*" if you send cookies
  credentials: true,
  methods: ["GET", "POST", "PUT", "DELETE", "OPTIONS"],
}));

Fix in Laravel

Laravel ships with a CORS layer. Configure config/cors.php:

return [
    'paths' => ['api/*'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['https://app.example.com'],
    'allowed_headers' => ['*'],
    'supports_credentials' => true,
];

Fix in Next.js Route Handlers

export async function GET() {
  return Response.json(data, {
    headers: {
      "Access-Control-Allow-Origin": "https://app.example.com",
      "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
    },
  });
}