veda.ng

Cross-Origin Resource Sharing (CORS) is a browser security mechanism that controls which web pages can make requests to different domains, selectively relaxing the Same-Origin Policy that otherwise blocks cross-domain API calls.

The Same-Origin Policy is a critical security feature: without it, malicious websites could make authenticated requests to your bank's API using your logged-in session cookies. com, or a third-party widget needs to fetch data from its server. CORS solves this through HTTP headers. When a browser makes a cross-origin request, it includes an Origin header identifying the requesting page.

The server responds with Access-Control-Allow-Origin specifying which origins may access the response. If the requesting origin matches, the browser allows the response; otherwise it blocks it. Complex requests (non-GET, custom headers, credentials) trigger a preflight OPTIONS request: the browser asks the server what's allowed before sending the actual request.

The server responds with allowed methods, headers, and whether credentials are permitted. CORS is server-controlled, the server decides who can call it. Misconfigured CORS is a common security vulnerability: allowing any origin (Access-Control-Allow-Origin: *) with credentials exposes authenticated endpoints.

Understanding CORS prevents frustrating debugging sessions when API calls inexplicably fail in browsers but work in Postman.

Interactive Visualizer

CORS (Cross-Origin Resource Sharing)

Browser security mechanism controlling cross-domain requests

🌐
Browser
https://app.example.com
1. Request
2. Check Origin
3. Server Response
4. Browser Decision
🖥️
Server
https://app.example.com/api

Request Headers

Origin: https://app.example.com
Host: app.example.com

Response Headers

No CORS headers
Same Origin: Protocol, domain, and port match - always allowed.
Cross Origin: Different domain - requires CORS headers to allow access.