Cross-Origin Resource Sharing (CORS) is a fundamental concept in web development that allows web pages to make requests to a different origin (domain, protocol, or port) than the one the web page was loaded from. This tutorial will delve into the details of CORS, focusing on the Access-Control-Allow-Origin header and how it enables cross-origin resource sharing.
Introduction to Same-Origin Policy
The same-origin policy is a security feature implemented in web browsers that prevents a web page from making requests to a different origin than the one it was loaded from. This policy helps prevent malicious scripts from making unauthorized requests on behalf of the user. However, there are scenarios where web pages need to make cross-origin requests, such as when fetching data from an API hosted on a different domain.
Cross-Origin Resource Sharing (CORS)
CORS is a standard mechanism that allows web servers to indicate which origins are allowed to access their resources. When a web page makes a request to a different origin, the browser includes an Origin header in the request, indicating the origin of the request. The server then responds with an Access-Control-Allow-Origin header, specifying which origins are allowed to access its resources.
Access-Control-Allow-Origin Header
The Access-Control-Allow-Origin header is used by servers to specify which origins are allowed to access their resources. This header can have one of two values:
- A specific origin (e.g.,
http://example.com) - A wildcard (
*) indicating that all origins are allowed to access the resource
When a server responds with an Access-Control-Allow-Origin header, it indicates to the browser which origins are allowed to access its resources. If the browser’s origin is included in the list of allowed origins, it will allow the request to proceed.
Simple and Non-Simple Requests
CORS requests can be classified into two categories: simple and non-simple requests.
Simple requests are those that meet the following conditions:
- The HTTP method is
GET,POST, orHEAD - The headers are limited to
Accept,Accept-Language,Content-Language, andContent-Type(with a value ofapplication/x-www-form-urlencoded,multipart/form-data, ortext/plain)
Non-simple requests, on the other hand, involve HTTP methods other than GET, POST, or HEAD, or headers beyond those listed above. For non-simple requests, the browser sends a preflight request (an OPTIONS request) to the server before sending the actual request.
Preflight Requests
Preflight requests are used by browsers to determine whether a non-simple request is allowed by the server. The preflight request includes the following headers:
Access-Control-Request-Method: specifies the HTTP method of the actual requestAccess-Control-Request-Headers: specifies the headers included in the actual request
The server responds to the preflight request with an Access-Control-Allow-Methods header, indicating which HTTP methods are allowed, and an Access-Control-Allow-Headers header, specifying which headers are allowed.
Example Scenario
Suppose we have a web page hosted on http://example.com that wants to make a PUT request to http://api.example.net. The server hosting the API needs to include the following headers in its response:
Access-Control-Allow-Origin: http://example.comAccess-Control-Allow-Methods: GET, POST, PUTAccess-Control-Allow-Headers: Content-Type
The browser will send a preflight request with the following headers:
Access-Control-Request-Method: PUTAccess-Control-Request-Headers: Content-Type
If the server responds with the required headers, the browser will proceed with the actual PUT request.
Conclusion
In conclusion, CORS is an essential mechanism for enabling cross-origin resource sharing on the web. The Access-Control-Allow-Origin header plays a crucial role in specifying which origins are allowed to access resources hosted on a different origin. By understanding how CORS works and how to use the Access-Control-Allow-Origin header effectively, developers can build more robust and secure web applications that take advantage of cross-origin resource sharing.