What Are CORS Preflight Requests?
Learn what triggers a CORS preflight, how the OPTIONS request and Access-Control headers work together.
Expected Interview Answer
A CORS preflight request is an automatic OPTIONS request the browser sends before certain cross-origin requests, asking the target server whether the actual request is allowed before letting it through.
Browsers trigger a preflight when a cross-origin request is not a simple request — for example, it uses methods like PUT or DELETE, sends custom headers like Authorization, or has a Content-Type other than a few whitelisted values such as text/plain. The browser sends an OPTIONS request with Access-Control-Request-Method and Access-Control-Request-Headers describing what the real request intends to do, and the server must respond with matching Access-Control-Allow-Origin, Access-Control-Allow-Methods, and Access-Control-Allow-Headers to approve it. Only if that preflight succeeds does the browser send the actual request; otherwise it blocks it client-side before any real request reaches the server. Preflight responses can be cached via Access-Control-Max-Age so the browser does not repeat the OPTIONS round trip for every subsequent identical request, which matters for latency-sensitive APIs.
- Lets servers explicitly opt in to risky cross-origin methods and headers before they execute
- Prevents unauthorized cross-origin writes from silently reaching the server
- Gives the server full control over which origins, methods, and headers are allowed
- Cacheable via Access-Control-Max-Age to avoid repeated round trips
AI Mentor Explanation
A CORS preflight is like a visiting team’s manager sending a note to the host ground asking, "can we bring our own drone camera and set it up ourselves?" before actually showing up with the equipment. The ground staff reply with exactly what is permitted — which gates, which gear — before the crew is allowed on site. Only after that written approval does the actual setup happen; unapproved requests never even get through the gate. That ask-first, approve-then-proceed pattern is exactly what a CORS preflight does before the real cross-origin request.
Step-by-Step Explanation
Step 1
Browser detects a non-simple request
A custom method, header, or Content-Type triggers preflight logic before the real request is built.
Step 2
Browser sends OPTIONS with intent headers
Access-Control-Request-Method and Access-Control-Request-Headers describe what the real request will do.
Step 3
Server responds with allowances
Access-Control-Allow-Origin, -Methods, and -Headers tell the browser exactly what is permitted.
Step 4
Browser sends or blocks the real request
If the preflight response matches the intended request, the browser proceeds; otherwise it blocks it client-side.
What Interviewer Expects
- Clear distinction between simple requests and requests that trigger preflight
- Understanding of the OPTIONS request and its Access-Control-Request-* headers
- Knowledge of the server response headers required to approve a preflight
- Awareness of Access-Control-Max-Age caching to reduce repeated preflights
Common Mistakes
- Believing CORS is enforced by the server rather than the requesting browser
- Not knowing which conditions (method, headers, Content-Type) trigger a preflight
- Forgetting that a failed preflight blocks the request before it reaches the server
- Confusing CORS with same-origin policy itself rather than a controlled relaxation of it
Best Answer (HR Friendly)
“A CORS preflight is a quick behind-the-scenes check the browser does before letting your app send certain cross-site requests, like ones using DELETE or custom headers. It asks the target server, "is this allowed?" and only sends the real request if the server says yes — which protects users from unauthorized cross-site actions.”
Code Example
app.options('/api/orders/:id', (req, res) => {
res.set('Access-Control-Allow-Origin', 'https://app.example.com')
res.set('Access-Control-Allow-Methods', 'PUT, DELETE')
res.set('Access-Control-Allow-Headers', 'Authorization, Content-Type')
res.set('Access-Control-Max-Age', '600')
res.sendStatus(204)
})
app.delete('/api/orders/:id', (req, res) => {
res.set('Access-Control-Allow-Origin', 'https://app.example.com')
// ...actually delete the order
res.sendStatus(200)
})Follow-up Questions
- What makes a cross-origin request “simple” and skip the preflight?
- How does Access-Control-Max-Age reduce the number of preflight requests?
- What happens if a server never responds to the OPTIONS preflight?
- How does CORS differ from CSRF protection?
MCQ Practice
1. What HTTP method does a browser use to send a CORS preflight?
The browser automatically issues an OPTIONS request to ask permission before the real request.
2. Which of these typically triggers a CORS preflight?
Non-simple methods and custom headers like Authorization force the browser to preflight first.
3. What happens if the server does not return the expected Access-Control-Allow-* headers on preflight?
A failed or missing preflight approval causes the browser to block the actual request client-side.
Flash Cards
What triggers a CORS preflight? — Non-simple methods, custom headers, or non-whitelisted Content-Type on a cross-origin request.
What method is the preflight request? — OPTIONS, carrying Access-Control-Request-Method/Headers.
What must the server return to approve it? — Matching Access-Control-Allow-Origin, -Methods, and -Headers.
How to reduce repeated preflights? — Set Access-Control-Max-Age so the browser caches the approval.