Understanding Access-Control-Allow-Origin Header
The Access-Control-Allow-Origin header is a critical security mechanism in web development that controls how resources on a server can be shared with web pages from different origins. It is a core component of Cross-Origin Resource Sharing (CORS), enabling servers to specify which external domains may access their resources while preventing unauthorized cross-origin requests.
How It Works
When a web application makes a cross-origin request (e.g., fetching data from api.example.com while hosted on app.example.com), the server responds with the Access-Control-Allow-Origin header to indicate whether the request is permitted. Browsers enforce this policy to protect users from potential security risks like cross-site request forgery (CSRF) or data leaks.
Key Configurations
1. Single Origin
Restricts access to one specific domain. This is the most secure option for sensitive resources.
Example:
Access-Control-Allow-Origin: https://trusted-site.com
⚠️ Note: If the request includes credentials (e.g., cookies), the origin must be explicitly specified—wildcards (
*) are not allowed.
2. Multiple Origins
Allows access from a predefined list of domains. The server must dynamically validate the Origin header against this list.
Example (Server-Side Logic):
const allowedOrigins = ["https://app1.com", "https://app2.com"];
const requestOrigin = req.headers.origin;
if (allowedOrigins.includes(requestOrigin)) {
res.setHeader("Access-Control-Allow-Origin", requestOrigin);
}
3. Wildcard Origin (*)
Permits requests from any origin. Use this only for public resources (e.g., open APIs) where security is not a concern.
Example:
Access-Control-Allow-Origin: *
❌ Avoid using wildcards with credentials or sensitive data. Browsers will reject such configurations.
4. Credentials and CORS
To allow requests with credentials (e.g., cookies, HTTP authentication), you must:
- Explicitly specify the origin (no wildcards).
- Set
Access-Control-Allow-Credentials: true.
Example:
Access-Control-Allow-Origin: https://secure-app.com
Access-Control-Allow-Credentials: true
Common Pitfalls and Best Practices
| Scenario | Risk | Solution |
|---|---|---|
Wildcard (*) + Credentials | Browser blocks the request | Always specify exact origins when using credentials. |
| Dynamic Origins | Security misconfigurations | Validate origins server-side (never trust client input). |
| Missing Preflight Checks | Incompatible with complex requests | Ensure OPTIONS requests are handled for non-simple requests (e.g., PUT, DELETE). |
When to Use Each Configuration
| Use Case | Recommended Configuration |
|---|---|
| Public API (no auth) | Access-Control-Allow-Origin: * |
| Single trusted frontend | Access-Control-Allow-Origin: https://app.com |
| Multiple trusted frontends | Dynamic origin validation |
| Authenticated requests | Explicit origin + Access-Control-Allow-Credentials: true |
Learn More
- MDN Web Docs: CORS – Official documentation with detailed examples.
- OWASP CORS Cheat Sheet – Security-focused best practices.
- CORS Explained (with Diagrams) – Visual guide to CORS workflows.