CORS, or Cross-Origin Resource Sharing, is a browser security mechanism that controls how resources on a web server are shared with different origins. It provides a secure way for web applications to request data from a different domain than the one that served the web page.

Why Do We Need CORS?

Browsers enforce the same-origin policy to prevent potentially malicious interactions. While websites can send requests to other origins, browsers block access to the responses unless the target server explicitly allows it. CORS loosens this restriction by allowing servers to specify which origins are allowed to access their resources, enabling secure cross-origin communication.

Understanding Origin

A website's origin is defined by its scheme (protocol), domain, and port. Even a slight difference in any of these three elements results in a different origin. This is why an https://example.com page cannot automatically access data from http://example.com or even https://api.example.com.

The Mechanics of a Cross-Origin Request ¹

When a website makes a cross-origin request, the browser attaches an Origin header with the site's origin. The server then responds with an Access-Control-Allow-Origin header. If the value of this header matches the requesting origin, the browser allows the response data to be processed by the web page.

If the origin in the request header does not match the server's Access-Control-Allow-Origin header, the browser blocks access to the response. This safeguard prevents unauthorized domains from retrieving sensitive data.

For same-origin requests, browsers do not send the Origin header and CORS is not involved. The Origin header is only included in specific situations, mainly those involving cross-origin requests or potentially unsafe operations like POST, PUT or DELETE.

Static resources like images, scripts, and stylesheets can often be loaded cross-origin without CORS, but JavaScript access to their content is restricted unless CORS headers are present.

Enabling Cross-Origin Requests

To allow cross-origin requests, servers can be configured to include the appropriate CORS headers. One common approach is whitelisting trusted origins. By adding the allowed origins into the response header, the server explicitly permits access. Alternatively, setting Access-Control-Allow-Origin to * allows any domain to request your resource, though this is generally discouraged in production environments due to security concerns.

Preflight Requests

For certain HTTP methods like PUT, PATCH, and DELETE or when non-standard headers are used, browsers perform a preflight request. This is an OPTIONS request sent by the browser to the server to verify that the actual request is safe to send.

Preflight requests are not sent for simple requests, such as GET, HEAD, or POST with standard headers and content types.

In the preflight process:

1. The browser sends a preflight OPTIONS request.
2. The server evaluates the request's origin and method, then responds if the primary request is allowed.
3. If approved, the browser proceeds with the main request.

If the server doesn't allow the request (by not including the proper CORS headers, such as Access-Control-Allow-Origin), the browser will block the primary request. Note that in some browsers, preflight requests might not appear in the network tab, making troubleshooting a bit tricky.

Performance Considerations

Preflighting can essentially double the number of requests made from the client, impacting performance. To optimize, servers can cache preflight responses using the Access-Control-Max-Age header. This reduces the need to send a preflight request for every interaction. As Nick Olinger has discussed, keeping your API on the same origin as your web application can altogether sidestep the performance hit of preflights.²

Final Thoughts

CORS is a vital tool for modern web development, balancing the need for resource sharing with the imperative of security. By correctly configuring CORS, you can allow your applications to communicate seamlessly across domains, without compromising on safety.

Understanding and applying CORS effectively can help you build more robust and secure web applications that communicate safely across different domains.