In this post we will focus on how to enable CORS in ASP.Net Core application, get knowledge about CORS policy how we can share resource through different origin.

Topic will be discussed:

  • What is CORS?
  • Create .Net Core WebApi Application
    • Add Packages
    • Add Database Connection
    • Enable CORS
  • Publishing to IIS
  • Share Through .Net Core Sample Application

 

Introduction:  First let’s get introduced with CORS, from Wikipedia, Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources (e.g. fonts) on a web page to be requested from another domain outside the domain from which the resource originated.

Get more details from docs.asp.net. Ok Let’s get started with our topic with a sample application.

Create  New Application: Open Visual Studio 2015 then go top menu and Click > File > New > Project

core_4

Choose Web API template

core_5

Finally .Net Core Welcome page will appear. Read more about .net Core.

core_6

First we need to add required Packages to sample application, here we have added those packages listed below in project.json file. After putting all those packages in our project config file they will automatically added to our application by IDE.

project.json

Now let’s add Database connection to our application. Open appsettings.json file, we have put down our database connection string here as you can see from the below code section.

appsettings.json

After that we need to call it in our application middle-ware in Startup.cs.

Now we are going to add & enable CORS to our sample API application. Open Startup.cs file from solution explorer, as you can see i have added the CORS service in ConfigureServices method to enabled it by getting called on run-time.

Here we have also specified different CORS enable policy by using CorsPolicyBuilder. You may test by enabling different types with this sample application.

Startup.cs : ConfigureServices

Let’s Separate the Code:  

With Origin: Enable CORS with All, Multiple or Specific Origin

Allow Specific Origin

Allow Multiple Origins

Allow All Origins

With Methods: Enable CORS with All, Multiple or Specific Methods

Allow Specific Methods

Allow All Methods

With Headers: Enable CORS with All or Specific Headers

Allow Specific Headers

Allow All Headers

After that we have enabled CORS for your application using an extension method “UseCors“.

Startup.cs : Configure

Finally the Full Startup.cs

MVC WebApi:

Here are list of required Namespace.

Api Controller:  Here we are applying specific CORS policy on APiController. It is also can be applied on per action based or globally for all controllers based.

We can disable CORS by using attribute “DisableCors“. In this controller we have applied on “PUT” method to disable CORS.

Publishing to IIS: We need to prepare our Server for ASP.net Core application to host. Get more details on Publish .Net Core Application. We have used localhost with assigning port 8081 to get accessed by our Sharing application.

http://localhost:8081

cors27

Let’s browse our application by using http://localhost:8081 url, as you can see our API is working with response of JSON data.

core_23

Now, time to access the shared resource. I have added an existing sample application to this solution, Below is the simple change that i have made to access the resource via API from different origin.

Share Resource:

Here we have tried to access the resource through  http://localhost:8081 but occurred server error, as you can see below.

core_25

After enabled CORS we have successfully able to access the shared resource through Web API.

cors28

Output:

core_24

Source Code: I’ve uploaded the full source code to download/clone @github, Hope this will help 🙂

6 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *