Interview answer drill

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

HighIntermediateJavascript
Interview focus

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
Practice more JavaScript interview questions
Interview quick answer

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.

Full interview answer

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 credentials: 'include'

Sends cookies, but requires server to allow credentials and a specific origin.

Use mode: 'no-cors'

Does not fix CORS; response becomes opaque and unusable.

What the frontend can and cannot control

Header

Purpose

Access-Control-Allow-Origin

Allow only trusted origins (never use * with credentials).

Access-Control-Allow-Methods

Explicitly list allowed methods (GET, POST, etc.).

Access-Control-Allow-Headers

Allow only required headers (e.g., Authorization, Content-Type).

Access-Control-Allow-Credentials

Needed for cookies; requires a specific origin (not *).

Access-Control-Max-Age

Cache preflight responses to reduce latency.

Vary: Origin

Prevents caches from mixing responses across origins.

Core CORS headers you should understand

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.

JAVASCRIPT
// 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.

Similar questions
Guides
Preparing for interviews?

Use this as one explanation rep, then continue with the JavaScript interview questions cluster or a guided prep path.