Access-Control-Allow-Origin
Description
The Access-Control-Allow-Origin response header is a crucial component of the Cross-Origin Resource Sharing (CORS) mechanism. It specifies which origins are permitted to access a resource in a cross-origin request. This header is essential for web security as it helps prevent unauthorized cross-origin access to resources.
When a browser makes a cross-origin request (a request to a different domain, port, or protocol than the one from which the current document originated), the browser first checks whether the requested resource has an Access-Control-Allow-Origin header that includes the origin of the requesting page. If the header doesn't include the origin or is missing, the browser blocks the response from being accessible to the requesting JavaScript code.
The Access-Control-Allow-Origin header is the cornerstone of the CORS specification and is used by servers to indicate whether their resources can be accessed by web pages from different origins.
Syntax
The syntax of the Access-Control-Allow-Origin header follows this structure:
<origin>:
A specific origin (e.g.,https://example.com) that is allowed to access the resource.*:
Indicates that the resource can be accessed by any origin. This should be used with caution, as it completely disables CORS protection.
Example Syntax
This example allows access only from https://example.com.
This allows access from any origin.
Examples
Specific Origin Example
A server response allowing cross-origin requests only from a specific domain:
HTTP/1.1 200 OK
Date: Mon, 02 Jun 2025 10:20:30 GMT
Content-Type: application/json
Access-Control-Allow-Origin: https://trusted-site.com
{"data": "This resource is accessible from trusted-site.com"}
Wildcard Example
A server response allowing cross-origin requests from any origin:
HTTP/1.1 200 OK
Date: Mon, 02 Jun 2025 10:25:45 GMT
Content-Type: application/json
Access-Control-Allow-Origin: *
{"data": "This resource is publicly accessible"}
Preflight Request Example
For complex requests (like those using methods other than GET, POST, or HEAD, or with custom headers), browsers first send a preflight request using the OPTIONS method:
OPTIONS /api/data HTTP/1.1
Host: api.example.com
Origin: https://app.example.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: Content-Type, Authorization
Server response to the preflight request:
HTTP/1.1 204 No Content
Date: Mon, 02 Jun 2025 10:30:15 GMT
Access-Control-Allow-Origin: https://app.example.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Max-Age: 86400
Summary
The Access-Control-Allow-Origin response header is fundamental to web security in cross-origin scenarios. It allows servers to specify which origins can access their resources, thereby preventing unauthorized cross-site data access. While setting this header to * enables any site to access the resource, it's generally recommended to specify only the trusted origins that require access. This header works in conjunction with other CORS headers to provide a comprehensive security framework for modern web applications.