Every full-stack developer has encountered the infamous console error: *"Access to XMLHttpRequest at 'api.domain.com' from origin 'domain.com' has been blocked by CORS policy."*
While it is tempting to bypass this check with wildcard stars or local extensions during development, doing so in production introduces massive security vulnerabilities. In this guide, we break down what CORS is, how preflight requests work under the hood, and how to safely resolve headers.
What is CORS?
Cross-Origin Resource Sharing (CORS) is a browser-security mechanism. By default, browsers enforce the Same-Origin Policy (SOP). This policy prevents a script running on one website (e.g., evil-site.com) from making requests to another domain (e.g., your-bank.com) to steal user credentials or submit malicious transactions.
CORS acts as a controlled exception to this rule. It allows a backend server to declare: *"I explicitly trust requests originating from domain.com, so allow the browser to share the response."*
How Preflight Requests Work
For requests that alter server state (like POST, PUT, DELETE or requests featuring custom headers), the browser automatically sends a lightweight preliminary check called a Preflight Request using the OPTIONS method:
# Browser Preflight Check
OPTIONS /api/v1/resource HTTP/1.1
Host: api.domain.com
Origin: https://domain.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Content-Type, AuthorizationThe server must reply with the matching access control permissions:
# Server Response
HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://domain.com
Access-Control-Allow-Methods: POST, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Max-Age: 86400 # Cache this check for 24 hoursIf the preflight check succeeds, the browser immediately follows up with the actual POST request payload.
How to Safely Configure CORS
Do not use wildcards (Access-Control-Allow-Origin: *) in authenticated APIs. It allows any website to make credentialed requests to your servers. Follow these standard, robust configurations instead:
# 1. Python/FastAPI Configuration
FastAPI includes a built-in CORS middleware to easily white-list origins:
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
app = FastAPI()
# Specify explicit trusted origins
origins = [
"https://devpads.com",
"https://staging.devpads.com",
"http://localhost:5173",
]
app.add_middleware(
CORSMiddleware,
allow_origins=origins,
allow_credentials=True,
allow_credentials=True,
allow_methods=["GET", "POST", "PUT", "DELETE", "OPTIONS"],
allow_headers=["Content-Type", "Authorization"],
)# 2. Node.js/Express Configuration
In Express setups, utilize the standard cors middleware:
const express = require("express");
const cors = require("cors");
const app = express();
const corsOptions = {
origin: function (origin, callback) {
const whitelist = ["https://devpads.com", "http://localhost:5173"];
if (whitelist.indexOf(origin) !== -1 || !origin) {
callback(null, true);
} else {
callback(new Error("CORS Policy Violation"));
}
},
credentials: true
};
app.use(cors(corsOptions));Summary
CORS is not a bug; it is a vital guardrail protecting the modern web. Understanding how preflights operate and configuring specific, credential-safe origin declarations keeps your user sessions secure and your cross-origin microservices communicating smoothly.