What is CORS and how do you configure it for a REST API?
Learn what CORS is, how the browser preflight and Access-Control headers work, and how to safely whitelist origins when configuring a REST API.
Expected Interview Answer
CORS (Cross-Origin Resource Sharing) is a browser security mechanism that lets a server explicitly allow web pages from a different origin to call its API, relaxing the same-origin policy in a controlled way.
When a page on one origin makes a cross-origin request, the browser adds an Origin header and, for non-simple requests, first sends a preflight OPTIONS request. The server must respond with Access-Control-Allow-Origin and related headers (Allow-Methods, Allow-Headers, Allow-Credentials) that whitelist the caller; if they are missing or do not match, the browser blocks the response. You configure it by enabling a CORS middleware on the API and listing the exact allowed origins, methods, headers, and whether credentials are permitted.
- Enables trusted front-ends to consume your API from other origins
- Keeps the browser same-origin protection intact by default
- Lets you whitelist only specific origins instead of opening everything
- Supports credentialed requests when explicitly configured
- Centralized via middleware so rules stay consistent across routes
AI Mentor Explanation
Think of a members-only pavilion at a cricket ground. A visiting fan (the browser page) from another club wants to enter, so the gatekeeper first checks the guest list at the gate before letting anyone through. Only clubs written on the approved list are allowed in, and even then only for specific stands. CORS is that gatekeeper: the server publishes exactly which outside origins may enter and which actions they may take.
Step-by-Step Explanation
Step 1
Understand the same-origin policy
Browsers block cross-origin reads by default; CORS is how a server opts specific origins back in.
Step 2
Add CORS middleware
Enable a CORS handler in your API framework so headers are applied consistently to all routes.
Step 3
Whitelist origins
Set Access-Control-Allow-Origin to explicit trusted origins rather than a wildcard, especially with credentials.
Step 4
Declare methods and headers
List allowed methods (GET, POST, PUT, DELETE) and custom headers like Authorization so preflight passes.
Step 5
Handle preflight and credentials
Respond to OPTIONS requests and set Access-Control-Allow-Credentials true only when cookies or auth are needed.
What Interviewer Expects
- Knows CORS is enforced by the browser, not the server
- Can explain the preflight OPTIONS request
- Understands the key Access-Control-* response headers
- Knows why wildcard origin cannot be used with credentials
- Can describe configuring it via middleware
Common Mistakes
- Thinking CORS protects the server rather than the browser user
- Using Access-Control-Allow-Origin: * together with credentials
- Forgetting to handle the preflight OPTIONS request
- Confusing CORS errors with actual server-side authorization failures
- Disabling CORS entirely as a quick fix instead of whitelisting origins
Best Answer (HR Friendly)
“CORS is a browser rule that decides whether a website is allowed to use an API hosted on a different address. You configure it on the server by listing exactly which websites, methods, and headers you trust, and the browser enforces those rules for you.”
Code Example
const cors = require('cors')
const options = {
origin: ['https://app.example.com'],
methods: ['GET', 'POST', 'PUT', 'DELETE'],
allowedHeaders: ['Content-Type', 'Authorization'],
credentials: true,
}
app.use(cors(options))
app.get('/api/users', (req, res) => {
res.json([{ id: 1, name: 'Ada' }])
})Follow-up Questions
- What is a preflight request and when does the browser send one?
- Why can't you use a wildcard origin with credentialed requests?
- Which headers are considered simple and skip the preflight?
- How do you debug a CORS error in the browser console?
- How does CORS differ from CSRF protection?
MCQ Practice
1. Who enforces CORS rules?
The server only sends headers; the browser reads them and decides whether to expose the response to the page.
2. Which method does a CORS preflight use?
The browser sends an OPTIONS preflight to check allowed methods and headers before the real request.
3. Which combination is invalid?
A wildcard origin cannot be combined with Access-Control-Allow-Credentials: true; a specific origin must be echoed.
Flash Cards
What does CORS stand for? — Cross-Origin Resource Sharing — a browser mechanism to allow controlled cross-origin API access.
What triggers a preflight? — Non-simple requests (custom headers, methods like PUT/DELETE) cause an OPTIONS preflight first.
Key allow-origin rule with credentials — You must echo a specific origin, never a wildcard, when Allow-Credentials is true.
Which header lists permitted methods? — Access-Control-Allow-Methods.