Enable CORS in .NET Core

Enable CORS in .NET Core

Due to the same-origin policy, most browsers restrict making requests to different domains than the originally served the website. This is a security feature that prevents a harmful site from accessing sensitive data on other sites. If you are developing an API though, cross-origin requests (CORS) are something you want to allow to make sure client applications can use the API.

Using a named CORS policy has been my preferred approach to enable CORS in .NET Core. This is simply because it applies the CORS policy to all endpoints in the API.

Code snippet below shows that I am opening up the API to the whole world:

public void ConfigureServices(IServiceCollection services)
{
    services.AddCors(o => o.AddPolicy("CorsPolicy", builder =>
    {
        builder.AllowAnyOrigin()
            .AllowAnyMethod()
            .AllowAnyHeader()
            .AllowCredentials();
    }));
    ...
}

public void Configure(IApplicationBuilder app,IHostingEnvironment env)
{
    ...
    app.UseCors("CorsPolicy");
    ...
}

Unfortunately, this does not appear to work and I get the following error when an AJAX request is issued in Chrome:

[Error] Access to XMLHttpRequest at ‘https://api.com/end-point’ from origin ‘https://mywebsite.com’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Safari on Mac OS logs the following errors:

[Error] XMLHttpRequest cannot load https://staging-app.ukesen.com/api/orders/poster due to access control checks.

[Error] Failed to load resource: Preflight response is not successful

AllowAnyOrigin affects preflight requests and the Access-Control-Allow-Origin header. It sets the header to be a wildcard '*', which is ignored by browser as it is considered insecure.

Solution

The solution is to avoid using AllowAnyOrigin when defining the CORS policy and specify the origins that will consume your API.

services.AddCors(o => o.AddPolicy("CorsPolicy", builder =>
{
    builder.WithOrigins("https://mywebsite.com")
        .AllowAnyMethod()
        .AllowAnyHeader()
        .AllowCredentials();
}));

The origin can be a full domain such as above or a sub domain. It is also possible to use wildcard subdomains:

services.AddCors(o => o.AddPolicy("CorsPolicy", builder =>
{
    builder.WithOrigins("https://*.mywebsite.com")
        .SetIsOriginAllowedToAllowWildcardSubdomains();
}));

Umut Esen

Umut is a certified Microsoft Certified Solutions Developer and has an MSc in Computer Science. He is currently working as a senior software developer for Royal London. He is the primary author and the founder of onthecode.

Leave a Reply