How to configure CORS policy in ASP.NET Core for multiple origins step by step?

Introduction

In modern web development using ASP.NET Core Web API, your frontend and backend almost never run on the same origin. For example, your React or Angular application might be running on http://localhost:3000 during development, while your API is hosted on a different domain like https://api.yourapp.com.

By default, browsers block such cross-origin requests due to a security rule called the Same-Origin Policy. This is where CORS (Cross-Origin Resource Sharing) becomes essential.

CORS allows your ASP.NET Core backend to explicitly define which external domains (origins) are allowed to access your API, making your application both secure and functional.

In this detailed guide, you will learn:

What CORS is and how it works internally
How to configure CORS for multiple origins in ASP.NET Core step by step
Real-world scenarios and architecture usage
Common mistakes developers make
Best practices for production-ready applications

What is CORS?

CORS (Cross-Origin Resource Sharing) is a browser-enforced security mechanism that controls how resources on a web server can be requested from another domain.

Real-Life Analogy

Think of your API as a secure office building:

Only authorized visitors (origins) are allowed inside
Security checks identity before granting access

Similarly, CORS policies define which domains can access your backend.

Why CORS is Important in Real Applications

In real-world systems:

Frontend: http://localhost:3000 (React app)
Backend: https://api.myapp.com (ASP.NET Core API)

Without CORS:

Browser blocks the request
You see errors like: "No 'Access-Control-Allow-Origin' header"

With CORS:

Controlled and secure communication is established

Real-World Scenario

Consider an e-commerce platform:

Customer website (shop.com)
Admin panel (admin.shop.com)
API server (api.shop.com)

You must allow only trusted domains to access your API, not the entire internet.

Step 1: Create ASP.NET Core Web API Project

dotnet new webapi -n CorsDemo

Step 2: Configure CORS Policy for Multiple Origins

In Program.cs:

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowSpecificOrigins", policy =>
    {
        policy.WithOrigins(
            "http://localhost:3000",
            "https://myfrontend.com"
        )
        .AllowAnyHeader()
        .AllowAnyMethod();
    });
});

Deep Explanation

WithOrigins → Defines allowed domains (multiple origins supported)
AllowAnyHeader → Allows custom headers like Authorization
AllowAnyMethod → Allows GET, POST, PUT, DELETE

Step 3: Apply CORS Middleware

app.UseCors("AllowSpecificOrigins");

This must be placed before authorization middleware:

app.UseAuthorization();

Step 4: Apply CORS at Controller Level (Optional)

[EnableCors("AllowSpecificOrigins")]
[ApiController]
[Route("api/[controller]")]
public class ProductsController : ControllerBase
{
    [HttpGet]
    public IActionResult Get()
    {
        return Ok("CORS Enabled Response");
    }
}

Step 5: Testing CORS Behavior

Request from allowed origin → Success
Request from unknown origin → Blocked by browser

How CORS Works Internally (Important Concept)

When a browser makes a cross-origin request:

It sends a preflight request (OPTIONS)
Server responds with allowed origins, headers, and methods
Browser validates response
If allowed → actual request is sent

This is why proper configuration is critical.

Real-World Use Case

Scenario: Multi-Frontend Architecture

Web App: https://app.company.com
Admin Panel: https://admin.company.com
Mobile API: https://api.company.com

CORS setup:

policy.WithOrigins(
    "https://app.company.com",
    "https://admin.company.com"
);

This ensures only trusted clients can access backend services.

Before vs After CORS Configuration

Before:

API calls fail in browser
Developers see confusing errors
Frontend cannot connect to backend

After:

Secure cross-origin communication
Controlled API access
Stable frontend-backend integration

Common Mistakes Developers Make

Mistake 1: Using AllowAnyOrigin in Production

policy.AllowAnyOrigin();

This exposes your API to any domain and is a major security risk.

Mistake 2: Incorrect Middleware Order

CORS must be configured before authentication/authorization middleware.

Mistake 3: Using Credentials with AllowAnyOrigin

This combination is not allowed and causes runtime errors.

Advanced CORS Configuration

Allow Credentials (Cookies / Auth Tokens)

policy.WithOrigins("https://myfrontend.com")
      .AllowCredentials()
      .AllowAnyHeader()
      .AllowAnyMethod();

Restrict HTTP Methods

policy.WithMethods("GET", "POST");

Advantages of CORS in ASP.NET Core

Enables secure communication between domains
Supports modern frontend architectures (React, Angular, Vue)
Provides fine-grained access control

Disadvantages of CORS

Misconfiguration can expose APIs to security risks
Debugging CORS issues can be time-consuming
Requires careful planning in production

Best Practices for CORS Configuration

Always whitelist specific domains in production
Avoid AllowAnyOrigin in secure applications
Separate configurations for development and production
Log and monitor failed CORS requests

Summary

CORS configuration in ASP.NET Core is a fundamental requirement for modern distributed web applications where frontend and backend operate on different domains. By properly defining policies for multiple origins, controlling headers and HTTP methods, and understanding how browsers enforce CORS, developers can build secure and scalable APIs. Whether you are working on enterprise systems, microservices, or cloud-based applications, implementing CORS correctly ensures seamless communication while protecting your backend from unauthorized access.