CORS HTTP Headers Explained

When a browser makes requests to a different origin than the one that served the original page, CORS comes into play to determine whether the request should be allowed. At the heart of this process are several key HTTP headers that both the browser and server use to communicate permissions and restrictions. Understanding these headers is crucial for managing cross-origin communication securely and effectively.

The primary CORS headers you will encounter include Access-Control-Allow-Origin, Access-Control-Allow-Methods, and Access-Control-Allow-Headers. Each header serves a specific role in defining which origins, HTTP methods, and request headers are permitted for a given resource. Additional headers, such as Access-Control-Expose-Headers and Access-Control-Max-Age, provide further control over what information is accessible and how long permissions are cached.

Let’s break down the main CORS headers and examine how they function:

• Access-Control-Allow-Origin: specifies which origin(s) are permitted to access the resource. This header can be set to a specific origin (such as "https://example.com"), or to the wildcard "*", which allows any origin. Only one origin or the wildcard can be specified per response;
• Access-Control-Allow-Methods: indicates which HTTP methods (such as GET, POST, PUT, DELETE) are allowed when accessing the resource in response to a preflight request;
• Access-Control-Allow-Headers: lists the HTTP headers that can be used during the actual request. This is also sent in response to a preflight request;
• Access-Control-Expose-Headers: determines which response headers are exposed and accessible to the browser’s JavaScript code;
• Access-Control-Max-Age: defines how long the results of a preflight request can be cached by the browser, reducing the number of preflight requests sent.

Each of these headers accepts specific values and directly influences how browsers handle cross-origin requests. For example, setting Access-Control-Allow-Origin to a particular domain restricts access to only that domain, while using "*" opens access to all origins. The Access-Control-Allow-Methods and Access-Control-Allow-Headers headers must match the methods and headers that the browser intends to use, or the request will be blocked. The Access-Control-Expose-Headers header is necessary if you want client-side JavaScript to access certain custom response headers, since by default only a limited set of headers are exposed. Finally, Access-Control-Max-Age helps optimize performance by reducing unnecessary preflight requests.

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://trusted.example.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Max-Age: 600

In this HTTP response example, the server explicitly allows cross-origin requests from "https://trusted.example.com" only, by setting the Access-Control-Allow-Origin header. The Access-Control-Allow-Methods header restricts allowed HTTP methods to GET and POST, meaning requests using other methods will be denied. The Access-Control-Allow-Headers header specifies that only the Content-Type and Authorization request headers may be used by the client when making requests. Lastly, the Access-Control-Max-Age header tells the browser it can cache this preflight response for 600 seconds (10 minutes), reducing the overhead of repeated preflight checks. By carefully configuring these headers, you control which origins, methods, and headers are permitted, thereby protecting your resources from unwanted or malicious cross-origin access.