Why do I get a CORS error?

Why the browser blocks your fetch request, and the one header that fixes it. Animated, step by step.

CORS (Cross-Origin Resource Sharing) is the browser protecting your users, not the server rejecting you. When a page on one domain requests data from another domain, the browser attaches an Origin header that says exactly who is asking. The server answers normally, but unless its response includes permission, the browser throws that response away before your code ever sees it.

That permission is a single header: Access-Control-Allow-Origin. When the server includes it with your origin, the browser hands your code the data. That's why the fix for a CORS error is always on the server, no amount of frontend code can grant permission the server didn't give.

Remember this

  • CORS is enforced by the browser, not the server
  • The server must send Access-Control-Allow-Origin with your origin
  • The data arrives at the browser either way, it's released to your code only with permission

Got a different question? SeaThru generates a fresh video for any topic where systems talk or data structures move.

Ask your own question →

Keep learning