Cross-Origin Resource Sharing (CORS) in .NET 8

Introduction

Cross-Origin Resource Sharing (CORS) is a security feature implemented by web browsers to control how resources can be requested from another domain. In .NET 8, managing CORS is straightforward, enabling you to control which domains can access your APIs and resources.

What is CORS?

CORS, or Cross-Origin Resource Sharing, is a security feature implemented by web browsers to prevent web pages from making requests to a domain different from the one that served the web page. In simpler terms, CORS is a way to allow or restrict resources on a web page to be requested from another domain.

Understanding CORS

Same-Origin Policy (SOP): Web browsers enforce the Same-Origin Policy to enhance security. This policy ensures that a web page can only make requests to the same origin (domain, protocol, and port) that served the web page. For example, a web page served from https://example.com cannot request https://anotherdomain.com under the SOP.
CORS: To enable requests to different domains, CORS relaxes the Same-Origin Policy under specific conditions. It allows a server to indicate which origins (domains) are permitted to access its resources.

Why is CORS Needed?

CORS is essential when your web application interacts with resources from a different domain. It allows servers to specify who can access the assets and how the requests should be handled, thus relaxing the same-origin policy in a controlled way.

How CORS Works?

Preflight Request

For certain types of requests (e.g., requests with methods like PUT or DELETE or requests that include custom headers), the browser sends a preliminary request called a "preflight" request. This is an OPTIONS request sent to the server to check if the actual request is safe to send.

Preflight Request

Blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

CORS Headers

The server responds to the preflight request (and to the actual request) with special headers.

Access-Control-Allow-Origin: Specifies which origin(s) are allowed to access the resource. It can be a specific origin (e.g., https://example.com) or a wildcard (*) to allow any origin.
Access-Control-Allow-Methods: Lists the HTTP methods (e.g., GET, POST, PUT) that are allowed when accessing the resource.
Access-Control-Allow-Headers: Lists the headers that are allowed in the actual request.
Access-Control-Allow-Credentials: Indicates whether the response to the request can be exposed when the credentials flag is true.

When you are building an application that serves resources (like APIs), and your front end is hosted on a different domain, you might encounter CORS issues. The browser will, by default, block requests from the front end to the backend if they are from different origins.

Setting Up CORS in .NET 8

Creating a New ASP.NET Core Project

I'm using Visual Studio 2022, going to create a new project as a Core-Config and Solution as a Web_ Solution.

Core Project

Open your Visual Studio, Click on Create a new project, select ASP.NET Core Web API, and click on the Next button.

Web API

Create a project as a Core-Config and the Solution name as aWeb_Solution. Click on the Next button.

Core-Config

Now click on the Create Button.

Create Button

See this folder structure.

Installing Necessary Packages

No additional packages are required as CORS support is built into ASP.NET Core.

Configuring CORS in Startup

Adding CORS Services

In the Program.cs file, add the CORS services to the dependency injection container.

// Add services to the container.
#region Configure CORS
builder.Services.AddCors(options =>
{
    options.AddPolicy("CustomPolicy", builder =>
        builder.WithOrigins()
               .AllowAnyMethod()
               .AllowAnyHeader());
});
#endregion

Code explanation.

builder.Services.AddCors(options =>{...});

This line is adding CORS services to the application's service collection. The AddCors method takes a lambda expression to configure CORS options.

 options.AddPolicy("CustomPolicy",builder => {...});

The AddPolicy method defines a new CORS policy named "CustomPolicy" within the lambda expression.

The AddPolicy method takes two parameters: the name of the policy and a lambda expression to configure the policy.

builder => builder.WithOrigins()

This part of the lambda expression is configuring the CORS policy. The builder object is used to specify the details of the policy.

WithOrigins("https://example.com") specifies that only requests from the origin https://example.com are allowed.

.AllowAnyMethod()

This method allows any HTTP method (GET, POST, PUT, DELETE, etc.) in the requests from the specified origin.

.AllowAnyHeader()

This method allows any headers in the requests from the specified origin.

Using CORS Middleware

To apply the CORS policy, add the middleware to the HTTP request pipeline.

app.UseCors("CustomPolicy");

You can see the Program.cs file.

var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
#region Configure CORS
builder.Services.AddCors(options =>
{
    options.AddPolicy("CustomPolicy", builder => 
        builder.WithOrigins() 
               .AllowAnyMethod() 
               .AllowAnyHeader());
});
#endregion
builder.Services.AddControllers();
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();
var app = builder.Build();
// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}
// Add Middleware
// --------------------------
// Using CORS Middleware
app.UseCors("CustomPolicy");
app.UseHttpsRedirection();
app.UseAuthorization();
app.MapControllers();
app.Run();

Advanced CORS Configuration

Allowing All Origins

For development purposes, you should allow all origins. Be cautious with this in production.

// Add services to the container.
#region Configure CORS

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowAllOriginsPolicy",
        builder => builder.AllowAnyOrigin()
                          .AllowAnyMethod()
                          .AllowAnyHeader());
});
#endregion

Allowing Multiple Origins

You can specify multiple origins by listing them in the WithOrigins method.

// Add services to the container.
#region Configure CORS
builder.Services.AddCors(options =>
{
    options.AddPolicy("CustomAllowOriginsPolicy",
        builder => builder.WithOrigins("https://abc-example1.com", "https://abc-example2.com")
                          .AllowAnyMethod()
                          .AllowAnyHeader());
});
#endregion

Handling Preflight Requests

Preflight requests are made by browsers to determine if the actual request is safe to send. Ensure you handle them correctly.

// Add services to the container.
#region Configure CORS
builder.Services.AddCors(options =>
{
    options.AddPolicy("HandlePreflight",
        builder => builder.WithOrigins("https://abc-example.com")
                          .AllowAnyMethod()
                          .AllowAnyHeader()
                          .SetPreflightMaxAge(TimeSpan.FromMinutes(10)));
});


#endregion

Applying CORS to Specific Controllers

Using Attributes

You can apply CORS policies to specific controllers or actions using attributes.

[ApiController]
[Route("api/[controller]")]
[EnableCors("CustomAllowOriginsPolicy")]
public class TestController : ControllerBase
{
    [HttpGet]
    public IActionResult Get()
    {
        return Ok("CORS is enabled for this endpoint.");
    }
}

Testing CORS Configuration

Using Browser Developer Tools

Use the browser's developer tools to inspect CORS requests and responses. Look for the Access-Control-Allow-Origin header in the response to verify that CORS is configured correctly.

Common Issues and Troubleshooting

CORS Errors

No 'Access-Control-Allow-Origin' Header: Ensure the CORS policy is correctly applied and the origin is allowed.
Preflight Request Fails: Check the server's response to the preflight request and ensure the necessary headers are included.

Debugging Tips

Check the server logs for errors.
Use network tracing tools to inspect HTTP requests and responses.

Conclusion

Configuring CORS in .NET 8 is essential for enabling secure cross-domain requests. By understanding and properly setting up CORS policies, you can protect your resources while allowing necessary access from specified origins.