Introduction to CORS

When you use the web, your browser often loads resources—such as images, scripts, or data—from different domains. This is where Cross-Origin Resource Sharing, or CORS, comes into play. CORS is a security feature built into web browsers that determines whether a web page from one origin can access resources from another origin. To understand why CORS is necessary, it helps to look at the history of web security.

In the early days of the web, browsers needed a way to prevent malicious sites from stealing sensitive data from other sites you were logged into. This led to the creation of the Same-Origin Policy (SOP), a fundamental security concept that restricts how documents or scripts from one origin can interact with resources from another origin. SOP made the web safer but also created challenges: as web applications became more complex, legitimate use cases for cross-origin communication emerged. Developers needed a way to allow controlled access to resources across different origins, without opening the door to security risks. CORS was introduced as a solution to this problem in modern browsers.

The Same-Origin Policy is the foundation of web security in browsers. It defines an "origin" as the combination of the protocol (such as http or https), the domain, and the port. Under SOP, a web page can only make requests to the same origin it was loaded from. However, there are many reasons you might want to access resources from another origin—for instance, fetching data from a public API or integrating third-party services.

This is where CORS extends the Same-Origin Policy. CORS provides a standardized way for servers to specify who can access their resources and how. When a web page tries to access a resource on a different origin, the browser checks for specific HTTP headers sent by the server. If the server explicitly allows the requesting origin, the browser permits the request; otherwise, it is blocked. This mechanism allows for flexibility while maintaining security, enabling you to build rich, interactive web applications that can safely interact with resources across the web.

In this example, your browser tries to fetch data from https://api.example.com/data using JavaScript. If the server does not include the correct CORS headers to allow your origin, the browser will block the request and display an error. This happens because the Same-Origin Policy is enforced by default, and CORS headers are required to grant exceptions. This protection is vital for web security, preventing malicious sites from accessing sensitive data on your behalf without permission.