What is CORS and why does it exist?

What is the Same-Origin Policy?

The Same-Origin Policy (SOP) is a browser security mechanism that restricts a web page from reading resources from a different origin.

Two URLs share the same origin when all three of the following match: protocol + hostname + port.

URL	Same origin as https://example.com?
https://example.com/page	✅ Yes
http://example.com	❌ Protocol differs
https://api.example.com	❌ Subdomain differs
https://example.com:8080	❌ Port differs

What is CORS?

CORS (Cross-Origin Resource Sharing) is an HTTP-header-based mechanism that lets a server declare which external origins are permitted to access its resources, selectively relaxing the Same-Origin Policy.

Why is CORS needed?

Without the Same-Origin Policy, a malicious site could silently make requests to a bank you are logged into and read the response — a classic CSRF / data-exfiltration scenario.

CORS lets the server say: "I allow requests from https://frontend.com."

How CORS works

Simple requests

Requests that meet the following criteria are sent directly by the browser with an Origin header:

• Method is GET or POST (with Content-Type of application/x-www-form-urlencoded, multipart/form-data, or text/plain)

The server grants access with:

Access-Control-Allow-Origin: https://frontend.com

Without this header the browser blocks JavaScript from reading the response.

Preflight requests

For anything that doesn't qualify as a simple request (PUT, DELETE, Content-Type: application/json, custom headers…), the browser first sends an OPTIONS request:

OPTIONS /api/data HTTP/1.1
Origin: https://frontend.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Content-Type

The server responds with its policy:

Access-Control-Allow-Origin: https://frontend.com
Access-Control-Allow-Methods: POST, PUT
Access-Control-Allow-Headers: Content-Type
Access-Control-Max-Age: 86400

Only if the preflight succeeds does the browser send the actual request.

Key response headers

Header	Purpose
Access-Control-Allow-Origin	Allowed origin (* or a specific origin)
Access-Control-Allow-Methods	Allowed HTTP methods
Access-Control-Allow-Headers	Allowed request headers
Access-Control-Allow-Credentials	Whether cookies may be sent (must be true)
Access-Control-Max-Age	How long to cache the preflight result (seconds)

When credentials (cookies) are required, Access-Control-Allow-Origin cannot be * — it must be a specific origin.

Common fixes in front-end development

1. Set CORS headers on the server (the correct solution)
2. Dev-server proxy: Vite / webpack devServer proxy routes requests so the browser never sees a cross-origin call
3. JSONP (GET only, largely obsolete)

Summary

• The Same-Origin Policy is a browser security mechanism that prevents cross-origin data reads.
• CORS is a mechanism by which a server tells the browser which cross-origin requests are allowed.
• A CORS error is the browser blocking the response — fixing it means adding the right headers on the server.