The Access-Control-Allow-Origin header specifies which origins are allowed to access a resource from a different domain.
Browsers enforce the Same-Origin Policy by default, preventing websites from accessing resources from different origins. This header relaxes that restriction by explicitly listing which origins can read the response. Without it, cross-origin requests will be blocked by the browser.
Syntax & Values
Access-Control-Allow-Origin: <origin> Access-Control-Allow-Origin: * Access-Control-Allow-Origin: null
The Access-Control-Allow-Origin header accepts a single origin value (e.g., https://example.com) to specify which origin is allowed to access the resource. It also supports the wildcard * to allow requests from any origin. Additionally, it accepts null for requests originating from local files (file://) or sandboxed iframes, though this is generally discouraged for security reasons.
Examples
Allowing a specific trusted origin
Only https://app.example.com can read this resource. Use this when you know exactly which domain should have access.
Access-Control-Allow-Origin: https://app.example.com
Public API accessible to anyone
Any website can access this resource. Suitable for public APIs that don't require authentication. Cannot be used with cookies or authorization headers.
Access-Control-Allow-Origin: *
Null origin (not recommended)
Matches requests from file:// URLs, sandboxed iframes, or redirects. Avoid using this as any origin can forge null by using a sandboxed iframe.
Access-Control-Allow-Origin: null
Common Errors & Fixes
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Ensure your server is configured to send the 'Access-Control-Allow-Origin' header. For example, in Express.js, you can use middleware: res.setHeader('Access-Control-Allow-Origin', 'https://your-frontend.domain.com'); or res.setHeader('Access-Control-Allow-Origin', '*');.
The 'Access-Control-Allow-Origin' header has a value 'https://another-domain.com' that is not equal to the supplied origin 'https://my-frontend.com'.
The server must return the exact origin that made the request if you are not using the wildcard '*'. Your server-side logic should dynamically check the 'Origin' request header and set the 'Access-Control-Allow-Origin' to that specific origin if it's on an allowed list. For example: res.setHeader('Access-Control-Allow-Origin', req.headers.origin || '*'); (ensure to validate req.headers.origin against an allowlist).
Preflight request doesn't have HTTP ok status. (No 'Access-Control-Allow-Origin' header is present on the requested resource for an OPTIONS request)
For requests that trigger a preflight (e.g., using methods other than GET/HEAD/POST, or with custom headers), the server must respond to the OPTIONS request with a 2xx status (typically 204 No Content) and include the 'Access-Control-Allow-Origin', 'Access-Control-Allow-Methods', and 'Access-Control-Allow-Headers' headers. Ensure your server handles OPTIONS requests correctly.
Frequently Asked Questions
Can I set multiple origins in a single Access-Control-Allow-Origin header?
No, the 'Access-Control-Allow-Origin' header can only contain a single origin or the wildcard '*'. It does not support a space-separated list of origins. To support multiple specific origins, your server-side application must implement logic to check the 'Origin' header of the incoming request and then set the 'Access-Control-Allow-Origin' header to that specific origin if it is in your list of allowed origins. If the requesting origin is not allowed, you should not set the ACAO header, or set it to a default restricted origin.
What is the difference between Access-Control-Allow-Origin: * and Access-Control-Allow-Origin: null?
The former '*' allows any origin to access the resource, while 'null' is a special value that can be returned for requests originating from 'null' origins (e.g., local HTML files opened via file://, or sandboxed iframes).