The CORS Error, Explained

https://www.youtube.com/watch?v=1P84YeTrjs4 Every web developer has seen this. You make a fetch request from your frontend. The browser blocks it. Big red error: Access to fetch from origin localhost:3000 has been blocked by CORS policy. You open your terminal, run the exact same request with curl, and it works perfectly. Same URL. Same headers. Same server. So what's going on? The Same-Origin Policy To understand CORS, you first need to understand the Same-Origin Policy. It's a security rule built into every browser. Two URLs share the same origin only if they have the same protocol, host, and port. localhost:3000 and localhost:3000/api ? Same origin. But localhost:3000 and localhost:8080 ? Different origins — the port changed. Here's the key: browsers block JavaScript from reading responses across different origins. Not the server. The browser. This exists because without it, any malicious website could make requests to your bank's API using your cookies and read your account data. T