CORS Headers — Complete Reference for Access-Control Directives

In this tutorial, you will learn about CORS Headers. We cover key concepts, practical examples, and best practices to help you master this topic.

CORS headers are HTTP response headers that a server sends to tell the browser which origins, methods, and headers are permitted for cross-origin requests to that resource.

What You'll Learn

• Every CORS header and what it controls
• How to configure each header correctly
• Common combinations and their security implications

Why It Matters

Every CORS header has security implications. A misconfigured Access-Control-Allow-Origin: * can expose your API to any website.

flowchart TD
    A["CORS Headers"] --> B["Response Headers"]
    A --> C["Request Headers"]
    B --> D["Access-Control-Allow-Origin"]
    B --> E["Access-Control-Allow-Methods"]
    B --> F["Access-Control-Allow-Headers"]
    B --> G["Access-Control-Expose-Headers"]
    B --> H["Access-Control-Max-Age"]
    B --> I["Access-Control-Allow-Credentials"]
    C --> J["Origin"]
    C --> K["Access-Control-Request-Method"]
    C --> L["Access-Control-Request-Headers"]
    style A fill:#dbeafe,stroke:#2563eb

Code Examples

// Server response with CORS headers (Node.js/Express)
const express = require('express');
const app = express();

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'https://myapp.com');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  res.header('Access-Control-Expose-Headers', 'X-RateLimit-Remaining');
  res.header('Access-Control-Max-Age', '86400');
  if (req.method === 'OPTIONS') return res.sendStatus(200);
  next();
});

# Check all CORS headers from a server
curl -I -H "Origin: https://myapp.com" \
  -H "Access-Control-Request-Method: POST" \
  https://api.example.com/data

# Look for these in response
# access-control-allow-origin: https://myapp.com
# access-control-allow-methods: POST, GET, OPTIONS
# access-control-allow-credentials: true

Common Mistakes

1. Using Wildcard Origin with Credentials

Access-Control-Allow-Origin: * cannot be used with Access-Control-Allow-Credentials: true.

2. Allowing Too Many Methods

Only allow the methods your API actually uses to reduce attack surface.

3. Exposing Sensitive Headers

Don't expose internal headers like X-Internal-Auth-Token via Access-Control-Expose-Headers.

4. Setting Max-Age Too Long

Long cache times prevent clients from seeing updated CORS policies for up to that duration.

5. Returning Headers Only for OPTIONS

CORS headers must be present on ALL responses, not just preflight.

Practice Questions

1. Which header specifies allowed origins?
2. Can Access-Control-Allow-Origin be a comma-separated list?
3. What is the purpose of Access-Control-Expose-Headers?
4. Which header allows JavaScript to read custom response headers?
5. What happens if Access-Control-Allow-Credentials is true without a specific origin?

Answers:

1. Access-Control-Allow-Origin.
2. No. The spec allows only *, null, or a single origin.
3. It tells the browser which response headers JavaScript is allowed to read.
4. Access-Control-Expose-Headers.
5. The browser blocks the request because Access-Control-Allow-Credentials: true requires an explicit origin.

Challenge: Configure a server with specific CORS headers for a banking API. Allow one specific origin, specific methods, and expose only safe headers.

FAQ

What's Next

Explore Credentials Mode with CORS, then learn about Wildcard Origins and their limitations.