How to implement CORS in ASP.NET Core 3.1 (Cross Origin Resource Sharing)

hello everyone and welcome to dot net course central in today's video i am going to work through how to use course in dotnet code the full form for course is cross origin resource sharing and i'm going to show three different ways of implementing it one is through the middleware second is through endpoint routing and third one is through attribute based implementation now to understand codes let's first understand why core is even needed so due to browser security policies the browsers prevents any web page calling services in a different domain so if you have ever worked in web-based application we usually make a jax call to retrieve data from service endpoints now browser prevents calling these endpoints into a different domain and by different domain it can be one of these four one is complete different domain for example abc.com versus mywebsite.com and then different sub domains basically one subdomain calling a complete different subdomain third one is difference in scheme that is http versus https and the fourth one is the different input now for today's example here i'm going to show through different port because i'm running localhost so i can easily simulate that now course was introduced by w3c which is the world wide web consortium the reason it was introduced because it is necessary for a lot of application to call services from a different domain and hence it was introduced and it is supports through a header and once i get in the code i'm going to show the exact name of the header which is used for code and in the course implementation the server who is exposing the api specifically supports this header mentioning what url can access this domain from a different domain so once we go through the code it will be much more simpler for the web application i i'm going to use one of the existing project that i created when i demo the static file if you have not gone through my video i'm going to share the link in the description as well as in the video you can take a look into that but this was my project for static file it's a very simple html page with hello world and it has a corresponding javascript which calls the weather forexcast and just logs the data in console now this is going to work because it is part of the same port hence if we call the weather forecast from the html page it is going to show up properly and as you can see we can see the weather data written in the console now let us create a new service and see how course comes into effect so for that i'm going to create a new web application and i'm going to name it as course.demo i'm going to create an api application keep it as asp.net code 3.1 and create the application now once the app is created i'm going to add a new controller and i'm going to add a api controller with read write action and i'm going to keep the name as values controller for this example it is immaterial what the name is so once the controller is created now i'm going to quickly change the properties to run a different port because the port 5000 is already taken so i'm going to make it five one zero one and five one zero zero and i'm going to change this to run as a console and now let's run the application now once the application is started if i go to api slash values i can see the data returned properly now let me go back to the other project and here instead of weather forecast that provides the url for values and now if i go back and i do a refresh this is the error i get so you can see here it says the origin 5004 this is the port number has been blocked by course policy and the header that i was talking about is this is the header access control allow origin so this is the header which needs to be present in the response of the api call now if i go to the network click on the api call you can see in the response header this header value does not exist hence the browser is failing due to course now this restriction is actually called same origin policy it's basically the call is allowed only within the same origin and course is what helps us to go across origin as the name suggests cross origin resource sharing now if i go back to my project and now it's time to implement course now for course as i mentioned earlier there are three different ways to do it first way is to use the course middleware and second way is we'll still use the middleware but we will use endpoint routing and the third way is to use attribute so first let's start with the default implementation and here what we are going to do is in the services which is iservice collection there is an extension method for course which is called add course and the add course we have an action which is the course option so we are going to use this options and these options we can have either default policy we can add a default policy or we can add a policy based on name first let's try out the default policy and we'll come to the named policy when we get into how to implement the endpoint routing or the attribute routing because that's where the name policy is going to be useful so now i'm going to just add a default policy and for the policy also you can see there is an action which is policy builder and we are going to use this let me go to the next line and here we can say builder builder dot now there are few options we have one is add any origin which is allow any origin or we can have specific origin with the width origins now let's start with allow any origin here basically we are telling well any website or web application calling this particular api we are just going to allow them we are not going to restrict anything but let's start with that and then we'll go to the next one another important thing to remember is when we add the middleware in the pipeline the middleware has to be after use routing and before use authorization that's a requirement for the course middleware this is something very important to remember and we can use the use course extension method and since we are using default course implementation we don't have to pass a policy name because we have not created any policy yet now if i run the application so all i did is i said you know what i'm going to add cores and i'm going to add default policy let me make it a little bit better looking so add default policy and the default policy allows any origin and then i'm just adding the middleware to the http pipeline so now if i run this application and if i go back to the previous website and do a refresh now now you will see value works just fine and if we see in the response header we see the access control allow origin is now available and it is star meaning any website will be able to access this now and if i go to console i see both the values are written now let's modify the application just to allow this particular endpoint and not everything else because that's a security concern so for that what we are going to do is instead of allow any origin we're going to say with origins and we're going to pass the url of the origin now another very important thing to remember here is that don't give the slasher the end that will not work we have to remove the slash at the end that's a requirement so now if i run it's going to work the same way but at this point in time for the access control header we are going to see the specific url so if i go here and run this in the network now i can see the access controller origin is allowing only this particular endpoint which is this so that's one way of doing course now let's go to the next way for next way is what we are going to do is now let's create a policy let's keep this policy default policy but let's allow 5005 which does not exist and now if we run because we have default policy as 5005 our web application here is going to start getting error because you know of course it is blocked and if we see the network we can see that you know we are not getting any access control because this particular url is blocked now what i'm going to do is i'm going to just like this add policy i'm going to change a little bit so that we can have multiple policy defined so the next thing i'm going to do is i'm going to say options dot add policy and i'm going to create a new policy say my policy and for this one just like before i'm going to use the action with policy builder and i'm going to say builder dot with origins and this time i'm going to give the origin of http port 5004 now with origin as you might have seen because it takes and param params of string array we can pass multiple urls here and that's how you do it so now we created a policy my policy but we are not using the policy anywhere now there are two ways of doing it one way is of course we can pass the policy here as policy name if we do that now we are not using default policy anymore and if we run the application the other web app will start working because we are providing a specific policy which supports 5004 and you can see that it's working now it's working but this is not what we want to do we want to have the default policy for everything else we want to use specific policy for controller so in that case what we can do is we can have require course and we can give the policy name here and we can pass my policy so once we do that what will happen is now all the controllers will use my policy hence my application will start working again because now i'm specifying a policy with the policy name and if i run see it's working as expected so that's the second way of using codes now the third way is attribute based course policy now for attribute based policy what we'll have to do is all we have to do is we come here and we can declare an attribute at the method level or at a controller level so i'm going to just show the control level because method level works exactly the same way and here we're going to say enable course and we'll pass the policy name because policy name is required if we just say enable course it's not going to work because it'll try to get the default policy and default policy does not allow that 5004 endpoint so if i just run like this i'll get the error it's expected so let me go back and provide the policy name here as my policy and now if i run and i go back to my project refresh everything is working as expected we are getting the origin as expected and the values in console so that's how enable course work now just like enable course there is an option called disable course so we can disable though we can enable the course for the entire controller but we can choose to disable course for a specific endpoint so let's just disable course for the get to demonstrate so here we just have to say disable course that's about it now if i run as you can see i didn't change anything else i just added disable cores and now if i go and execute this this is going to fail and it's failing of course because we are disabling codes for that particular get method now i'm going to get rid of it run it again and everything should work as expected yep so these are the three main ways of implementing cores in asp.net core just to reiterate we can use default policy on named policy to configure course and after that we have to add the middleware and then we can either do just middleware which will enable all endpoints in the service for a particular url or all url calling it which is either through with origin or allow all origins and then if we want only controllers or a particular endpoint we can use the require codes extension method and then if we want to have individual methods or a controller to have course enabled then we can go with enable codes or a combination of enable course and disable codes attributes so that's all i wanted to cover today if i'm missing something please let me know in the comment if you like this video please give me a thumbs up and if you are following my channel and not subscribed to it and you think you are getting value out of my channel please subscribe to my channel thanks so much for watching this video

Channel: DotNet Core Central

Views: 31,491

Keywords: cors, cors .net core, cors asp.net core, cross origin resource sharing, cross origin resource sharing .net core, cross origin resource sharing asp.net core, cors in .net core, cors in asp.net core, how to implement cors, how to implement cors in asp.net core

Id: MBpH8sGqrMs

Length: 13min 21sec (801 seconds)

Published: Sun Aug 16 2020