Web API 5 - Adding CORS to ASP .NET Core Web API

 Hello All,

In this article we will implement one of the beautiful feature called CORS.

"Cross Origin Resource Sharing"

We have created the API in the article Web API Part 1 - ASP .NET Core Web API Using EntityFrameworkCore and MSSQL Server as Database

We will download the same article and proceed from there.

CORS:

We get the error when we try to access the asp.net core web API which is deployed in different server and which has different PORT. The main reason is that same-origin policy is a standard security mechanism in all the web browsers when they communicates between two URLs, It works fine only if they share the same origin(like same protocol, port, and host).

For example server URL is https://server.com/api and  Client is https://server.com/client

It works fine, because both client and server are in same origin i.e. server.com

Issue comes when both the URL is different for example Server is https://server.com/api and client is  https://client.com/client 

The main reason is these two URLs have different port addresses. Security restrictions in your web browser will not allow requests to a server application in another domain.

What Error we get?

Access to fetch at 'https://localhost:7289/api/Learning/learning-list' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Is there any solution for this?

Yes of-course! we have the solution, come lets implement and learn this. 

First, We will download the source code from Web API Part 1 - ASP .NET Core Web API Using EntityFrameworkCore and MSSQL Server as Database

1. Open the above mentioned project in Visual Studio

2. Go to Program.cs and add the below code

builder.Services.AddCors(opt =>
{
    opt.AddPolicy(name: "SampleCORS", builder =>
    {
        builder.AllowAnyOrigin();
        builder.AllowAnyHeader();
        builder.AllowAnyMethod();
    });
});

In the above code we have given name for our CORS i.e. SampleCORS, like this we can have multiple CORS and assign same to different controllers with different rules.

"SampleCORS" is the policy name which we need to mention in app.UseCors. It could be any name.

Please place the app.UseCors("SampleCORS") in between app.UseHttpsRedirection() and app.UseAuthentication()

3. You can now use this name to apply the policy to controllers and actions:

[EnableCors("SampleCORS")]

Or you can also apply it to every request means every action.

That's it. Now Every client has access to your ASP.NET Core Website/API.

Download Complete Source Code Here Download Source Code

That's it for this article, in this we have learnt the concept called how to handle the CORS.