CORS Explained: Cross-Origin Resource Sharing
Cross-Origin Resource Sharing (CORS) is a browser security mechanism that restricts cross-origin HTTP requests. It prevents malicious sites from reading sensitive data from other origins. Proper configuration on the server side (headers) is required for legitimate cross-origin communication.
The browser is the club owner. When a request comes from a different origin (another club), the bouncer (CORS policy) checks the guest list (headers). If the origin is not allowed, the request is blocked before it reaches the server.
1Simple vs Preflight Requests
Simple requests (GET, HEAD, POST with basic headers) are sent directly. Non-simple requests (PUT, DELETE, custom headers) trigger a preflight OPTIONS request first.
Simple Request
Browser sends actual request → Server responds with CORS headers
Preflight
Browser sends OPTIONS → Server responds with Allow headers → Browser sends actual request
2Essential CORS Headers
Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers, Access-Control-Allow-Credentials, and Access-Control-Max-Age.
3Server-Side Implementation
Configure CORS middleware or manually set headers. Always specify exact origins in production instead of using wildcard (*).
| Property | Simple Request | Preflight Request |
|---|---|---|
| Methods | GET, HEAD, POST (basic Content-Type) | PUT, DELETE, custom headers |
| Preflight | No | Yes (OPTIONS) |
| Common Use | Basic data fetching | State-changing operations |
Simple Request
Methods
GET, HEAD, POST (basic Content-Type)
Preflight
No
Common Use
Basic data fetching
Preflight Request
Methods
PUT, DELETE, custom headers
Preflight
Yes (OPTIONS)
Common Use
State-changing operations
Common questions
- ›“What is CORS and why does it exist?”
- ›“Explain the difference between simple and preflight requests.”
- ›“How do you fix a CORS error in a full-stack app?”
- ›“What is Access-Control-Allow-Credentials and when do you need it?”
What interviewers look for
- Understanding of browser security model
- Knowledge of preflight mechanism
- Practical server configuration (headers/middleware)
- Security awareness (never use * with credentials)
Short answer (60 sec)
CORS is a browser security feature that blocks cross-origin requests unless the server explicitly allows them via headers. Use Access-Control-Allow-Origin and handle OPTIONS preflight requests for non-simple methods.
Detailed answer (senior level)
CORS prevents malicious sites from reading data from other origins. Simple requests go directly; complex ones trigger a preflight OPTIONS request. Server must respond with proper Access-Control-* headers. In production, specify exact origins instead of wildcard. Use credentials: 'include' with Access-Control-Allow-Credentials: true and specific origin (not *).
- Using Access-Control-Allow-Origin: * with credentials
- Forgetting to handle OPTIONS preflight requests
- Only configuring CORS on some endpoints
- Not setting proper Access-Control-Allow-Headers
- Assuming CORS is only a frontend issue
- ✓CORS is a browser-enforced security policy
- ✓Simple requests don't need preflight; others do
- ✓Always specify exact origins in production
- ✓Handle OPTIONS requests for preflight
- ✓Use middleware like cors() in Express
- ✓Credentials require specific origin + Allow-Credentials header
- ✓Test cross-origin requests thoroughly