How to enable CORS in ASP.NET Core

By FoxLearn 1/4/2025 4:03:22 AM   22
The same-origin policy is a security measure in web browsers that restricts interactions between different URLs unless they share the same protocol, port, and host.

For example, a script from `http://localhost:5000` cannot access a server at `http://localhost:6080` because they have different ports.

CORS (Cross-Origin Resource Sharing) is a W3C standard that enables controlled access to resources from different origins, bypassing the default same-origin policy in browsers.

Creating a new ASP.NET Core project in Visual Studio, which we’ll use to enable and configure CORS in the upcoming sections.

Note that if you attempt to access the server application’s controller methods from the client application using AJAX calls, the browser will reject the request. This happens because CORS is not yet enabled in the server application.

Add CORS to the ASP.NET Core request processing pipeline

To work with CORS in ASP.NET Core, follow these steps:

  1. Install the CORS middleware.
  2. Add the CORS middleware to the pipeline in the ConfigureServices method.
  3. Enable CORS in the Configure method.
  4. Configure CORS in the controllers, action methods, or globally.

The Microsoft.AspNetCore.Cors package provides the CORS middleware for enabling cross-origin resource sharing in ASP.NET Core.

To install it, go to Tools > NuGet Package Manager > Manage NuGet Packages for Solution, then search for Microsoft.AspNetCore.Cors in the NuGet package manager and install it.

Next, add the CORS services to the pipeline by invoking the AddCors method on the IServiceCollection instance within the ConfigureServices method of the Startup class, as shown in the code snippet below.

public void ConfigureServices(IServiceCollection services)
{
    services.AddCors(); // Add CORS services
    services.AddControllers() // Add controllers for API functionality
            .SetCompatibilityVersion(CompatibilityVersion.Latest); // Set the latest compatibility version
}

Configure CORS policy in ASP.NET Core

In ASP.NET Core, you can configure CORS policies in various ways depending on your security and functionality requirements.

Below is an example that shows how to configure a policy allowing only a specific origin to access the server resources.

services.AddCors(options =>
{
    options.AddPolicy("AllowSpecificOrigin", builder =>
        builder.WithOrigins("http://localhost:60070")); // Allow only this origin
});

In addition to WithOrigins, ASP.NET Core provides several other methods for configuring CORS policies:

  • AllowAnyOrigin: Allows access from any origin.
  • AllowAnyHeader: Permits any HTTP headers in the request.
  • AllowAnyMethod: Permits any HTTP method (e.g., GET, POST) to be used.
  • AllowCredentials: Allows credentials (e.g., cookies, HTTP authentication) to be included in the cross-origin request.
  • WithMethods: Restricts access to specific HTTP methods.
  • WithHeaders: Restricts access to specific headers.

For example, to allow access from multiple origins, you can specify more than one origin in the WithOrigins method:

services.AddCors(options =>
{
    options.AddPolicy("AllowMultipleOrigins", builder =>
        builder.WithOrigins("http://localhost:60070", "http://localhost:60790")); // Allow multiple origins
});

If you want to allow any origin to access your resources, use the AllowAnyOrigin method:

services.AddCors(options =>
{
    options.AddPolicy("AllowAllOrigins", builder =>
        builder.AllowAnyOrigin()); // Allow all origins
});

CORS is a powerful mechanism that enables you to bypass the same-origin policy restrictions in web browsers. By configuring CORS policies, you can control which domains are allowed to access your server resources, ensuring secure and flexible cross-origin access.