Cross-Origin Resource Sharing(CORS) in Asp.Net Core

Hello Devs!

CORS (Cross-Origin Resource Sharing) is a browser security feature and a mechanism that allows controlled access to resources located outside of a given domain.

If the CORS policy is not configured by Web API then the client application receives the error No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Lets create a new Asp.Net Web Api project to better understand !

After creating the project, I am running the application on my localhost .As you know .Net comes ready with a default Weather Forecast controller for us.

I’m trying to send a fetch request to my Web API from another website. When I send a GET request from other website to my Web API project, I encounter a CORS error.

‘Access to fetch at ‘https://localhost:44329/api/CorsTry/GetTest’ from origin ‘origin’ has been blocked by CORS policy: No ‘Access-Control -Allow-Origin’ header is present on the requested resource’.

Let’s make some changes in our Web API to resolve this error and avoid getting a CORS error when requests come from the origins I have specified.

We need to install the Microsoft.AspNetCore.Cors Nuget package from Project > Tools > NuGet Package Manager > Manage NuGet Packages for Solution

However, for .NET Core 5.0 or higher versions, you do not need to install it.

Open the Program.cs file and add these configurations:

• We set the policy name to _myAllowSpecificOrigins. The policy name is optional. After we call the UseCors extension method and specifies the _myAllowSpecificOrigins CORS policy.
• The call to UseCors must be placed after “UseRouting”, but before “UseAuthorization”.

var MyAllowSpecificOrigins = "_myAllowSpecificOrigins";

builder.Services.AddCors(options =>
{
    options.AddPolicy(name: MyAllowSpecificOrigins,
                      policy =>
                      {
                          policy.WithOrigins("https://oguzevrensel.com",
                                              "https://www.nacres.com.tr");
                      });
});

app.UseRouting();
//UseCors must be placed after "UseRouting", but before "UseAuthorization"
app.UseCors(MyAllowSpecificOrigins);

app.UseAuthorization();

After applying these changes, I am making a request to my Web API again.

As you can see, this time I able to receive a response to my request.

Additionally, we can enable CORS with attributes, allowing us to specify which policy each endpoint should use. For example:

After specifying my policies in Program.cs, We can use them in the endpoints.

Alternatively, [DisableCors] attribute can be used to disable CORS for the respective endpoint. Below is an example;

Summary

CORS (Cross-Origin Resource Sharing) is a security measure that allows web pages to request resources from different sources. This measure is implemented to reduce security risks in browser-based applications. We have learned how to enable CORS in Asp.Net Core.

References

IIS CORS Module : The Official Microsoft IIS Site

How to Setup CORS Policies in ASP.NET Core Web API : GeeksArray.com

CORS (3), Enable CORS In .NET Core Web API (c-sharpcorner.com)

Thank you for reading..