How does Cross-Origin Resource Sharing (CORS) work in web development?

Cross-Origin Resource Sharing (CORS) is a mechanism that allows many resources on a web page to be requested from another domain.

CORS is a protocol that uses additional HTTP headers to tell browsers to give a web application running at one origin, permission to access selected resources from a server at a different origin. A web application executes a cross-origin HTTP request when it requests a resource from a different domain, protocol, or port than the one from which the current document originated.

An example of a cross-origin request is a web application served from http://mydomain.com that uses AJAX to make a request for http://yourdomain.com. For security reasons, browsers restrict cross-origin HTTP requests initiated by scripts like AJAX. Hence, CORS came into existence to relax these security restrictions, allowing many resources (e.g., fonts, JavaScript, etc.) on a web page to be requested from another domain outside the domain from which the resource originated.

Here's how it works: The browser adds an 'Origin' header to the request, which includes the domain that the request came from. The server then checks this header and decides whether it wants to respond based on its CORS policy. If the server allows the request, it responds with an 'Access-Control-Allow-Origin' header, matching the 'Origin' value from the request header. The browser then decides whether to allow the request to complete based on what it sees in the 'Access-Control-Allow-Origin' header.

If the server decides not to respond to the request (perhaps because it doesn't recognise the requesting domain), it can either leave off the 'Access-Control-Allow-Origin' header or it can set it to a value that doesn't match the 'Origin' header from the request. In either case, the browser will not allow the request to complete.

In summary, CORS is a crucial security feature that allows servers to control which domains can access their resources. It's a way to relax the same-origin policy, which prevents web pages from making requests to a different domain than the one the web page came from, while still maintaining control over who can access server resources.