What is CORS and How Does It Work?
Learn what CORS is, how preflight requests work, and the key headers involved — with networking interview questions answered.
Expected Interview Answer
CORS (Cross-Origin Resource Sharing) is a browser-enforced security mechanism that lets a server explicitly declare, via HTTP response headers, which other origins are allowed to read its responses when a page from one origin makes a request to a different origin.
Browsers apply the same-origin policy by default, which blocks a script running on one origin from reading responses returned by a different origin (different scheme, host, or port). CORS relaxes that restriction in a controlled way: the server adds headers like Access-Control-Allow-Origin, Access-Control-Allow-Methods, and Access-Control-Allow-Headers to its responses, and the browser checks those headers before handing the response body to the calling script. For requests that are not simple (custom headers, methods like PUT/DELETE, or certain content types), the browser first sends an OPTIONS preflight request to ask permission before sending the real request. CORS is enforced entirely by the browser, not the server, which means it protects browser users from malicious cross-origin JavaScript reading data, but it is not a substitute for server-side authentication or authorization.
- Lets trusted origins share resources without disabling browser security entirely
- Preflight requests catch unsafe cross-origin calls before they run
- Keeps the same-origin policy as the safe default for everything else
- Configurable per-route, so APIs can whitelist only the origins they trust
AI Mentor Explanation
CORS is like a stadium security desk that checks a visiting team’s accreditation list before letting their support staff onto the home ground. The home venue publishes exactly which visiting clubs are pre-approved to enter certain areas, and security checks that list at the gate rather than trusting anyone who shows up. For sensitive areas like the dressing room, security first sends a runner to confirm approval before allowing entry, mirroring a preflight check. Without being on the approved list, the visiting staff are turned away at the door even if they have valid staff badges from their own club.
Step-by-Step Explanation
Step 1
Same-origin policy applies
The browser blocks a page from one origin from reading a response from a different origin by default.
Step 2
Preflight (if needed)
For non-simple requests, the browser sends an OPTIONS request asking the server which origins, methods, and headers are allowed.
Step 3
Server responds with CORS headers
The server replies with Access-Control-Allow-Origin and related headers declaring what it permits.
Step 4
Browser enforces the decision
If the actual response headers do not authorize the calling origin, the browser blocks the script from reading the response body.
What Interviewer Expects
- Understands CORS is enforced by the browser, not the server
- Can explain the difference between simple and preflighted requests
- Knows the key headers: Access-Control-Allow-Origin, -Methods, -Headers
- Recognizes CORS is not an authentication mechanism
Common Mistakes
- Thinking CORS blocks the request from being sent at all (it blocks reading the response)
- Believing CORS is a server-security feature protecting the server, not the browser user
- Setting Access-Control-Allow-Origin to a wildcard on endpoints that require credentials
- Confusing a CORS error with a network failure or a 404
Best Answer (HR Friendly)
“CORS is the browser’s way of checking whether a website is allowed to fetch data from a different website’s server. The server publishes a list of trusted origins in its response headers, and the browser only lets the calling page use the response if it is on that list. It is a browser-side safety check, not something that stops the request from reaching the server in the first place.”
Code Example
# Send a preflight OPTIONS request and inspect the CORS headers
curl -i -X OPTIONS https://api.example.com/orders \
-H "Origin: https://app.example.com" \
-H "Access-Control-Request-Method: POST" \
-H "Access-Control-Request-Headers: Content-Type"
# Expected response headers on a permissive API:
# Access-Control-Allow-Origin: https://app.example.com
# Access-Control-Allow-Methods: GET, POST, OPTIONS
# Access-Control-Allow-Headers: Content-Type
# Access-Control-Max-Age: 600Follow-up Questions
- What triggers a CORS preflight request versus a simple request?
- How does Access-Control-Allow-Credentials interact with wildcard origins?
- How would you debug a CORS error reported by a frontend team?
- Why is CORS not sufficient protection against CSRF attacks?
MCQ Practice
1. Which component enforces CORS restrictions?
CORS is a browser-side enforcement mechanism; the server only declares its policy via headers.
2. What HTTP method does a CORS preflight request use?
Browsers send an OPTIONS request as the preflight check before certain cross-origin requests.
3. Which header does a server use to declare which origins may read its response?
Access-Control-Allow-Origin tells the browser which origins are permitted to read the response.
Flash Cards
What is CORS? — A browser-enforced mechanism letting servers declare which cross-origin callers may read their responses.
What triggers a preflight request? — Non-simple requests: custom headers, methods like PUT/DELETE, or certain content types.
Key CORS response header? — Access-Control-Allow-Origin, naming which origins may read the response.
Does CORS stop the request from being sent? — No — it stops the browser from letting the script read the response.