CORS, short for Cross-Origin Resource Sharing, is a security feature implemented by web browsers to control how web pages from one origin (domain) can access resources hosted on another origin. An origin is defined by the combination of protocol (e.g., HTTP or HTTPS), domain (e.g., Example Domain ), and port (if specified).
By default, web browsers enforce the Same-Origin Policy (SOP), which restricts web pages from making requests to a different origin than the one from which the web page was served. This security measure is in place to prevent unauthorized access to sensitive data and to mitigate cross-site request forgery (CSRF) attacks.
However, there are legitimate use cases where a web application hosted on one domain needs to access resources (like APIs) hosted on another domain. This is where CORS comes into play, allowing controlled access between different origins.
Here’s how CORS works:
Origin Header: When a web browser makes a cross-origin request (i.e., a request to a different domain), it includes an Origin header in the HTTP request, indicating the origin of the web page that initiated the request.
Preflight Request: For certain types of cross-origin requests (e.g., those with methods other than GET, POST, or HEAD, or requests with custom headers), the browser sends a preflight request (an HTTP OPTIONS request) to the server to check if the cross-origin request is allowed. The server responds with appropriate CORS headers indicating whether the actual request is permitted.
CORS Headers: The server must respond to the preflight request and all subsequent cross-origin requests with specific CORS headers that define which origins are allowed to access its resources. The key CORS headers are:
Access-Control-Allow-Origin: Specifies the allowed origins. It can be a single origin, “*”, or a list of specific origins.
Access-Control-Allow-Methods: Defines the allowed HTTP methods for the cross-origin request.
Access-Control-Allow-Headers: Specifies the allowed request headers for the cross-origin request.
Access-Control-Allow-Credentials: Indicates whether the browser should include credentials (e.g., cookies, HTTP authentication) when making the actual request.
Access-Control-Expose-Headers: Specifies which response headers can be exposed to the requesting client.
Credentials and Cookies: By default, cross-origin requests do not include credentials (e.g., cookies). If the server needs to allow credentials to be sent in the request, the Access-Control-Allow-Credentials header must be set to true. Additionally, the requesting client needs to include the withCredentials: true flag when making the request in JavaScript.
CORS is essential for building secure web applications that communicate with APIs and resources hosted on different domains. By enforcing these access controls, it prevents unauthorized access and helps protect sensitive user data while still allowing legitimate cross-origin interactions when explicitly permitted by the server.