What is CORS and Why Does It Exist?

In the previous article , we learned that an Origin consists of three components: Scheme (Protocol) Host Port Browsers use these three components to determine whether a request is Same-Origin or Cross-Origin . Whenever a web page attempts to access resources from a different Origin, a security mechanism called CORS (Cross-Origin Resource Sharing) comes into play. 📌 Why Does a CORS Error Occur? Suppose your web application is running at: https://app.example.com Now it tries to fetch data from: https://api.example.com Although both URLs belong to example.com , their Hosts are different. That means they have different Origins. As a result, the browser treats this as a Cross-Origin request. If the destination server does not explicitly allow this Origin, the browser prevents JavaScript from accessing the response, resulting in what we commonly call a CORS Error . 💡 Important: CORS is a browser security mechanism , not a server security mechanism. ⚠️ A Common Misconception About CORS Many developers believe that a CORS error means the request never reached the server. In most cases, that's simply not true. Typically: ✅ The browser sends the request. ✅ The server receives it. ✅ The server generates and returns a response. ❌ The browser blocks JavaScript from accessing that response. In other words, the request was successful—the browser simply refuses to expose the response to your application because the CORS policy was not satisfied. This is why sending the exact same request using tools like Postman or curl usually works without any problems. Those tools are not browsers, so they do not enforce browser security policies like CORS. 📦 How Does the Server Handle CORS? To allow JavaScript to access the response, the server must include the appropriate CORS headers. The most important one is: Access-Control-Allow-Origin: https://app.example.com This header tells the browser that JavaScript running on https://app.example.com is allowed to read the response. ✅ Examples Suppos