CORS Wildcard Origin — When to Use and When to Avoid

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

The CORS wildcard origin (Access-Control-Allow-Origin: *) allows any website to make cross-origin requests to your API, providing maximum Accessibility but minimum security.

What You'll Learn

• When the wildcard origin is appropriate
• Why wildcard fails with credentials
• How to implement dynamic origin checking

Why It Matters

Choosing the wrong CORS origin policy exposes your API to abuse or blocks legitimate users. Understanding the tradeoffs helps you make the right choice.

flowchart LR
    A["Access-Control-Allow-Origin: *"] --> B["Public API?\nNo auth/cookies?"]
    B -->|"Yes"| C["Safe to use\nwildcard"]
    B -->|"No"| D["Use specific\norigin instead"]
    A --> E["Need credentials?"]
    E -->|"Yes"| D
    E -->|"No"| C
    style A fill:#dbeafe,stroke:#2563eb

Code Examples

// Setting wildcard origin (Express)
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  next();
});

// Dynamic origin checking
const allowedOrigins = ['https://myapp.com', 'https://admin.myapp.com'];
app.use((req, res, next) => {
  const origin = req.headers.origin;
  if (allowedOrigins.includes(origin)) {
    res.header('Access-Control-Allow-Origin', origin);
  }
  next();
});

Common Mistakes

1. Using Wildcard for User-Specific Data

Wildcard exposes every user's data to any site that knows their API URL.

2. Trying to Set Multiple Origins

CORS allows only one origin value. Use dynamic checking instead.

3. Combining Wildcard with Credentials

The browser rejects this combination entirely.

4. Using Wildcard in Development Only

Configure different CORS policies for development, staging, and production.

5. Assuming Wildcard Means No Security

Wildcard still requires the browser to enforce CORS. Server-to-server requests bypass it entirely.

Practice Questions

1. What is the syntax for a wildcard CORS origin?
2. Can wildcard origin be used with authentication?
3. How do you allow multiple specific origins?
4. Is it safe to use wildcard for a public weather API?
5. What header must be set alongside a dynamic origin?

Answers:

1. Access-Control-Allow-Origin: *.
2. No. Credentials require a specific origin.
3. Check the Origin header in server code and echo back the allowed one.
4. Yes, if it has no user-specific data and doesn't use credentials.
5. Vary: Origin to prevent Caching conflicts.

Challenge: Implement a CORS middleware that reads from a list of allowed origins and echoes back the matched origin, with proper Vary header support.

FAQ

What's Next

Implement CORS in Express or CORS in Django for framework-specific configuration.