All posts
May 30, 20266 min read

CORS errors explained: why your API request works in curl but fails in the browser

The most confusing thing about a CORS error is that nothing is actually broken. The API works. The request may even have reached it. But the browser refuses to hand your JavaScript the response, and prints something cryptic about Access-Control-Allow-Origin.

What CORS actually protects

Your browser carries your cookies and your logged in sessions. Without CORS, any website you visit could quietly make requests to your bank, your email, or your company's internal tools, riding on your credentials, and read the responses. CORS is the rule that says: JavaScript on site A can only read responses from site B if site B explicitly allows it.

That is why curl, Postman, and your backend can call any API freely. They are not browsers holding someone's credentials, so the protection does not apply to them.

How the browser decides

When JavaScript on https://app.example.com fetches https://api.other.com/data, the browser looks at the response headers. If they include Access-Control-Allow-Origin: https://app.example.com (or *), your code gets the response. If not, the browser throws it away and shows the CORS error. For requests with custom headers or methods like PUT, the browser first sends an OPTIONS preflight request asking permission.

Fixing it

CORS is fixed on the server, never in the browser. The API needs to send the right headers:

  • Access-Control-Allow-Origin: the origin allowed to read responses.
  • Access-Control-Allow-Methods: which methods are allowed.
  • Access-Control-Allow-Headers: which request headers are allowed, needed when you send things like Authorization.

If you do not control the API, you need a proxy: your own small backend that forwards requests server to server, where CORS does not apply. Browser extensions that disable CORS exist, but they only change your browser, not your users' browsers.

Test an API from your browserSend REST requests from your browser, import or copy as cURL, and inspect the status, headers, timing, and response body.

Reading the error precisely

“No Access-Control-Allow-Origin header” means the server did not opt in at all. “Origin not allowed” means it opted in for other origins but not yours. “Preflight response not successful” means the OPTIONS request failed, often because the server does not handle OPTIONS or an auth layer rejects it. Each message points at a different server side fix.