How Browsers Enforce CORS

When you make a request from a web page to a server on a different origin, the browser automatically enforces Cross-Origin Resource Sharing (CORS) rules. This enforcement is a core part of web security, designed to prevent malicious sites from reading sensitive data from other sites without permission. The browser acts as the gatekeeper, ensuring that only allowed cross-origin requests succeed.

The lifecycle of a cross-origin request begins when your JavaScript code, or the browser itself, tries to access a resource from a different origin. An origin is defined by the combination of protocol, domain, and port. For example, a page loaded from https://example.com sending a request to https://api.example.com is considered a cross-origin request. The browser checks the request against CORS policy before sending it and again when the response arrives.

Browsers enforce CORS by following a precise sequence of checks and actions. First, the browser determines whether the request is cross-origin by comparing the origin of the page with the target URL. If the origins differ, CORS policy comes into play.

The browser then prepares the request, setting headers such as Origin to indicate where the request is coming from. When the server responds, the browser examines the response headers, especially Access-Control-Allow-Origin. If the server's response allows the origin (for example, by echoing the Origin or using a wildcard), the browser allows the JavaScript code to access the response data. If the headers do not permit the origin, the browser blocks access and typically logs a CORS error in the console. Importantly, the browser enforces these rules regardless of what the JavaScript code does—your code cannot bypass CORS enforcement from within the browser.

In the fetch example above, your browser tries to request data from https://api.anotherdomain.com while the page is loaded from https://example.com. Because the server does not include the Access-Control-Allow-Origin header in its response, the browser blocks the request and shows a CORS error in the console. This error message clearly indicates that the problem is with the server's response headers, not your code. The browser's enforcement ensures that only responses explicitly allowed by the server can be accessed by your JavaScript, protecting users from unauthorized data exposure.