Secure CORS handling is mostly a server-policy and preflight debugging problem, not a frontend workaround. The production-safe fixes are trusted origin allowlists, correct headers, and a BFF or proxy when direct browser access is the wrong architecture.
Use this JavaScript interview question to rehearse a quick answer, common mistake, follow-up, and production pitfall.
How would you securely handle CORS issues in a frontend application?Frontend interview answer
This JavaScript interview question tests whether you can explain Secure CORS handling in production: server policy, preflight debug, and BFF patterns, connect it to production trade-offs, and handle common follow-up questions.
- Secure CORS handling in production: server policy, preflight debug, and BFF patterns explanation without falling back to memorized docs wording
- Cors and Security reasoning, edge cases, and production failure modes
- How you would answer the most likely JavaScript interview follow-up
Security model
CORS is a browser-enforced boundary, so the frontend cannot bypass it. Real fixes are about server policy and preflight debug: allow the right origins, methods, and headers, or move calls behind a BFF/proxy when direct browser access is the wrong production architecture.
Frontend action | What it does (and doesn’t do) |
|---|---|
Use same-origin URLs (call your own domain) | Avoids CORS entirely if the API is served from the same origin. |
Remove custom headers / use simple requests | May avoid preflight, but still won’t bypass CORS if the server disallows the origin. |
Set | Sends cookies, but requires server to allow credentials and a specific origin. |
Use | Does not fix CORS; response becomes opaque and unusable. |
Header | Purpose |
|---|---|
| Allow only trusted origins (never use |
| Explicitly list allowed methods (GET, POST, etc.). |
| Allow only required headers (e.g., Authorization, Content-Type). |
| Needed for cookies; requires a specific origin (not |
| Cache preflight responses to reduce latency. |
| Prevents caches from mixing responses across origins. |
Preflight (OPTIONS) requests
Browsers send a preflight when a request is not “simple” (custom headers, non-GET/POST, or JSON content type). Your server must respond to OPTIONS with the same CORS headers or the real request will be blocked.
// Express example (server-side)
app.use((req, res, next) => {
const allowed = ['https://app.example.com'];
const origin = req.headers.origin || '';
if (allowed.includes(origin)) {
res.setHeader('Access-Control-Allow-Origin', origin);
res.setHeader('Vary', 'Origin');
res.setHeader('Access-Control-Allow-Credentials', 'true');
}
res.setHeader('Access-Control-Allow-Methods', 'GET,POST,PUT,DELETE');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
if (req.method === 'OPTIONS') return res.sendStatus(204);
next();
});
When you can’t change the API
Use a backend proxy/BFF: your frontend calls your own server, and your server calls the third-party API. This avoids CORS, keeps API keys private, and lets you enforce auth, logging, and rate limits.
Avoid these
- Disabling CORS in the browser or using extensions (not a real fix).
- Using
mode: 'no-cors'(opaque responses you cannot read).
- Setting
Access-Control-Allow-Origin: *with credentials.
Interview-ready answer
You don’t “fix CORS” in the frontend; you configure the API (or a proxy/BFF) to allow trusted origins with the right CORS headers, handle preflight correctly, and avoid wildcard origins when credentials are involved.
Use this as one explanation rep, then continue with the JavaScript interview questions cluster or a guided prep path.