CORSBrowser SecurityHTTPAPIsmiddle level

CORS: Why the Browser Blocks Your API Call

the question

What is CORS, why do browsers enforce it, and how would you fix a CORS error between a frontend and an API?

what they're testing: The interviewer is probing whether you can connect browser security rules to HTTP behavior and diagnose the problem at the correct layer.

a strong answer

CORS lets an API tell a browser which other origins may read its responses. An origin is the scheme, host, and port. The same-origin policy restricts those reads; otherwise, a hostile page could use your logged-in browser to read private data from another site. That is why a call may work in curl or Postman but fail in a browser.

For a cross-origin fetch, the browser sends an Origin header. The API opts in with response headers such as Access-Control-Allow-Origin. A method or request header outside the CORS safelist triggers an OPTIONS preflight. The browser sends the actual request only if the preflight response allows the origin, method, and headers. An actual request can return 200 and still have its response hidden from JavaScript.

Configure CORS at the API or a proxy you control. Allow only the frontend origins that need access, handle OPTIONS, and return appropriate headers on preflight and actual responses. To expose a credentialed response, the server must send Access-Control-Allow-Credentials: true and an explicit origin, not *. A development proxy can make local traffic same-origin, but disabling browser security or using mode: "no-cors" does not fix production CORS. The latter gives JavaScript an opaque response.

Where people slip

the tempting wrong answer, and what's actually true

A CORS error means the API rejected the HTTP request.
The request may succeed at the network layer while the browser refuses to expose its response to JavaScript.
Setting `Access-Control-Allow-Origin: *` fixes every CORS error.
Credentialed requests require an explicit allowed origin, and preflighted requests may also require allowed methods and headers.
Using `fetch` with `mode: "no-cors"` lets the frontend read any API response.
The request produces an opaque response whose body and headers are unavailable to JavaScript.

If they push further

When does the browser send a preflight request?

Explain that requests outside the CORS safelist, such as those using `PUT` or custom headers, trigger an `OPTIONS` check before the actual request.

How do cookies change the CORS configuration?

For a cross-origin `fetch`, set `credentials: "include"`; the server must return `Access-Control-Allow-Credentials: true` and a specific allowed origin rather than `*`. Cookie `SameSite` rules and browser third-party cookie policies still apply.

Why does the request work in curl or Postman?

The same-origin policy is enforced by browsers, so a non-browser HTTP client does not block access to the response based on CORS headers.

Sources

Now answer it yourself.

Reading a strong answer is easy. Producing one under pressure is the skill the interview tests. Gapmap grades your answer against the same bar an interviewer would.

was this useful?

beta

The interviewer part is in the works.

The diagnostic, personal maps, and AI mock interviews are being finished right now. The notes stay free either way. Leave an email and you'll get the first-cohort invite, plus a month of Pro when it opens.