How to Fix CORS Error in .NET Core: A Step-by-Step Guide

Learn how to fix CORS errors in your .NET Core backend with this step-by-step guide. We explain each solution to help you manage cross-origin requests smoothly.

What is CORS?

CORS (Cross-Origin Resource Sharing) is a security feature implemented by browsers to restrict how web applications can make requests to a domain other than the one that served the web page. It protects users by ensuring that websites can’t send requests to different domains without permission.

When building modern web applications (like those using Angular on the front end and .NET Core on the back end), you might face a CORS error when your frontend tries to communicate with a backend hosted on a different domain, port, or protocol.

.NET Core database connection Methods, Steps, and Best Practices

Steps to Fix CORS Error in .NET Core

Let’s walk through how to fix this error in a .NET Core application.

1. Install the CORS Middleware

The first step is to install the CORS middleware in your .NET Core project. This middleware will help you manage the allowed origins for cross-origin requests.

Steps:

• Open your .NET Core project.
• Install the Microsoft.AspNetCore.Cors NuGet package if it’s not already installed.

To install it, use the following command in the Package Manager Console:

Install-Package Microsoft.AspNetCore.Cors

Or, if you’re using the .NET CLI, run:

dotnet add package Microsoft.AspNetCore.Cors

2. Configure CORS in Startup.cs

Once you’ve installed the middleware, you need to configure CORS in your application by modifying the Startup.cs file.

Steps:

• Open the Startup.cs file.
• In the ConfigureServices method, add the CORS services:

public void ConfigureServices(IServiceCollection services)
{
    services.AddCors(options =>
    {
        options.AddPolicy("AllowSpecificOrigin",
            builder =>
            {
                builder.WithOrigins("https://example.com")
                       .AllowAnyHeader()
                       .AllowAnyMethod();
            });
    });

    services.AddControllers(); // Add this if not already present
}

In this example:

• WithOrigins("https://example.com"): Replace "https://example.com" with the frontend domain you want to allow.
• AllowAnyHeader(): Allows any HTTP headers in the request.
• AllowAnyMethod(): Permits all HTTP methods like GET, POST, PUT, etc.

3. Apply CORS Middleware in the Pipeline

Next, you need to ensure that the CORS middleware is applied when handling HTTP requests. This is done in the Configure method of the Startup.cs file.

Steps:

• In the Configure method, add the CORS middleware:

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }

    app.UseHttpsRedirection();

    app.UseRouting();

    // Enable CORS
    app.UseCors("AllowSpecificOrigin");

    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
    });
}

Make sure to call app.UseCors("AllowSpecificOrigin"); before app.UseAuthorization() to ensure that CORS policies are applied before authorization checks.

4. Enable CORS Globally or on Specific Controllers

You can enable CORS globally, as shown above, or apply it to specific controllers or actions.

To Apply CORS on a Specific Controller or Action:

Add the [EnableCors] attribute to your controller or method:

[EnableCors("AllowSpecificOrigin")]
[ApiController]
[Route("[controller]")]
public class MyController : ControllerBase
{
    // Controller methods
}

5. Handling Credentials (Optional)

If your application needs to send credentials (such as cookies or HTTP authentication), you’ll need to adjust your CORS policy to allow credentials.

Modify the CORS policy like this:

builder.WithOrigins("https://example.com")
       .AllowAnyHeader()
       .AllowAnyMethod()
       .AllowCredentials();

Make sure that the origin is specific (wildcards such as * will not work when using credentials).

6. Test the CORS Configuration

Now, run your .NET Core application and try to make requests from your frontend. If everything is set up correctly, the CORS error should no longer appear.

Common CORS Errors and Troubleshooting Tips

1. CORS Policy Not Applied Correctly: Ensure the CORS middleware is placed before app.UseAuthorization() in the Startup.cs file.
2. Origin Not Allowed: Make sure the origin you’re trying to access is explicitly listed in the WithOrigins method.
3. Credentials Blocked: If you’re using cookies or HTTP authentication, make sure the AllowCredentials() method is included, and you’re not using wildcard (*) origins.
4. Mixed Content Error: If your frontend and backend use different protocols (e.g., HTTP vs. HTTPS), browsers may block the request for security reasons.

Conclusion

Fixing CORS errors in a .NET Core backend requires understanding how browsers enforce cross-origin requests. By configuring the CORS policy in your backend through the steps outlined above, you can enable secure cross-origin communication between your frontend and backend applications.

By following this guide, you should be able to fix CORS errors in your .NET Core application. If you have any questions or face issues, feel free to leave a comment or consult the official ASP.NET Core CORS documentation.