.NET 8 .🚀🔥: Understanding CORS with ASP.NET

Hello friends thank you for watching this video I am Muhammad and in today's video we're going to be discussing cores we're going to be discussing how we can actually utilize them and why do we need them inside our net web apis we're going to be seeing the main benefits of course and we're going to be see the different configuration that we can actually Implement inside our API so we can actually facilitate the communication between our apis and our clients so first of all let us understand the problems that core solved so let's start right now so what I have here is let me add a first a rectangle so this is going to be my API so I'm going to put here API and inside my API and basically the API is going to be responsible for serving all of the different information that's needed to the client so I'm going to have also a database which is going to be responsible for providing or storing all of this information so here I'm going to have a database and all of the information that's needed between the API and the database is going to be going from like this for example so my API will request information from my database and what I'm going to also have I'm going to have a lot of different clients so I might have here my first client which is going to be a Blazer application and my blazer application will be basically responsible for uh communicating with my API and getting request I might have here a angular app for my admin section for example this could be for my clients this could be for my admin I could have a different ones here for a mobile app so as we can see here that these are the different clients that I can actually have so here we can have these are the clients and the clients could defer so for example for my uh admin which is going to be an angular I can have all of the different requests that I want to put update delete anything that I want but for my player I could only want C for example for my mobile app I can specify different requirements so what's happening here so my application is going to do the clients will do a request for my apis and they're going to be requesting new information depending on the user action let's fix this Arrow perfect so now I have these three different clients uh running and I have my API so my API for example it could be running on Port let's say for this for Simplicity sake I'm going to put http for/ localhost on Port for example 5,300 so this is where my API is running but at the same time my Placer application could be running on Port 5000 which is a completely different domain my angular application could be running on a complete different browser like uh let's say uh 6,000 6,3 for example my mobile application it be it could have been connecting from a complete different let's say this one 9,000 so we can see here that I have one domain two domain third domain and I have my API domain by default the API will not going to be allowing any request coming in from any end point or from any different domain other than itself so whenever a client is trying to do a call to my API without a uh without the same domain is going to be blocking that request so basically if I right now if this actually my my client is trying to do the call to my API is going to be rejected because it's coming from a different domain similarly to my angular application complete different domain is going to be rejected similar to my mobile app complete different domain is going to be rejected so we can see here that in this scenario uh the clients there is no way they will be able to communicate with my apis to get the data from the database so what do we need to do in order for us to resolve this what we need to do is we need to actually tell the API that it needs to actually identify that there's a client that's going to be communicating with it and this client is going to be coming from this domain so it needs to allow it and this is where cores come into place ches basically stand for cross origin resource sharing because basically Origins means here domains so cross domain resource sharing so whenever we have a cross domain call it means that we are allowing the request to Pro to be processed from inside our apis and this is going to be the main uh the main idea that we're going to be working with we are actually allowing that different clients from different domain to communicate with our apis and actually getting the response so let's see how we can implement this example within a Blazer application and our web API so let me go to Rider and inside Rider here let's us see what do we have we have a very simple web API and as we can see here inside we have two controllers we have a driver's control and achievement controllers we can see that the information is coming from AQ equ light database inside our program. CS the only thing we're doing here is we're getting a connection string to our database and we're actually injecting it to our application DB context and that's is uh all of the other stuff is basically just boorder plate code on the other hand for my client application I have here a Blazer web application with the few pages in so we can see I have my homepage I have my driver's page and I have page to add a driver so let's see this in action so what I'm going to do right now is I'm going to run my API so I'm just going to putut run perfect I can see here my API is running on Port 5301 I'm going to also run my client app so do not run again we can see it's running here on Port 5,000 so I have already already two different end points or different domains Port 5000 and 5301 so now if I try to open my client application inside my web browser so let me go to my web browser here let me put the endpoint and let's go to it we can see my blazer app runs this is the homepage there's no API calls but if I go to let's see let's see network here and I go to drivers we can see here there's a lot of stuff not working uh I'm getting a lot of Errors if I go to console we can see that the first pro error that I have seen here we can see cross origin request blocked the same origin policy this allow reading so basically what it means here that the actual API received that request uh from uh the 5000 domain from the clim laser application and basically said this is a complete different domain I'm not allowing any request coming in so it's it it completely blocked it and it returns that access control allow origin or basically cores is not actually there uh the policy is not there to allow it so I'm going to be blocking it so now let's see how we can resolve this so let's go back to Ryder and what I'm going to do here is I'm going to start adding this configuration of course inside my program. Cs and and it's going to be pretty straightforward the first thing that we need to do is before the Builder do build we need to add the policies here and the way that we're going to be utilizing this is we're going to be relying on the Builder those services in order for us to inject course so let's see how to do that we're going to put Builder do services. add course so now that we have basically told our application that we're going to be utilizing course now we need to specify the options in order for us to add the different rules so I'm going to put options here let me fix this perfect and now inside my options I need to Define my policies so because if I go back to my diagram here every single one of these clients could have a different policy so this one will have a policies this one will have a unique set of policies this one will have a unique set of policies I can have one policy which is cover all of them but that's not really good practice because it will uh basically generalize all of those uh request when it comes to course and I will not going to be able to have a granal control on which clients can do what and it could lead to different problems so it's always good to have a unique policy that's going to be uh uniquely identified to a single client so let's see how we can add a policy so in order for us to add a policy I'm going to put options do add policy so as we can see here I can see I have two options I have the ad policy and I had default policy default policy will mean that it's going to be for every single client that exist ad policy is going to be for a unique one so I'm going to utilize this one so the first thing that I need to provide is is going to be the policy name and for this policy name I'm just going to provide it as a Blazer up and then once I specify the blaz the policy name what do I need to do I need to provide the configuration and the ruling for this specific policy and to do this I'm going to have to do Builder actually let's put a new line policy Builder and we can specify it here so within this policy Builder we are actually allowed to configure this so let's put policy Builder Dot and here we can see that all of these configuration that are allowed to me so let's see let's start first with specifying the URL so I'm going to put with Origins and the with Origins means here is going to be what is the domain that this policy is going to be catering to and if we take a look at our client we can see that's going to be on Local Host 5,000 so I'm going to copy this and I'm going to put it here and I'm going to remove this at the end so this is going to be the first one then I'm going to put policy Builder dot now what do I want to do I want to basically allow any header I want to allow any method so allow any header here means that no matter what the header request coming in I can allow them so I'm not doing any any uh security handling so here for example I can force it to have a unique API keys inside my header in order for it to pass the authentication etc etc I can have for example specific configuration that actually uh validate that this is coming from a valid uh client not a spoof client so that can also happen in the header but for now for Simplicity sake we're doing any header then I'm going to put policy Builder do U allow any method so this means that if I'm doing post get uh put delete everything's going to pass I can basically prevent the allow any method here and actually specify that I can only do cat or I can only do post again for Simplicity s with doing for anything and then I'm going to put policy Builder Dot and if I go down here allow any credentials and this allow any credentials for testing purposes if there's any types of credential that my API relies on I can directly allow any credentials combination and it will pass but in real in real case scenario we should not have that in place so this for example here I created my policy for my blazer application so this is my first policy but right now what happen if I want to go and add a policy for my angular application how can this work pretty straightforward it's going to be similar again I put option ions do add policy and here I can specify the policy for my for example angular app and then similar policy Builder and I can specify the same policies over and over again so if I copy this for example I don't have an angular app but I'm going to create a random domain for it so I'm going to put uh 6,90 uh 900 for example and again and again so now that I have specified all of these configurations inside my application let me stop these this is not this is not enough for my application to work so what I did here is I actually told myut application that there's going to be a course ruling that you're going to be have to utilize and you need to actually make sure that you are processing but this is only providing the information in order for me to actually activate course what I need to do is I need to take my policy name and after the builder. build what I need to do is I need to put app do use course and here I need to specify my um course uh policy that I want and here for example if I have a different one for example my angular app I can put angular oops angular app and here I you can see I have two policies that I'm actually executing so right now I'm on only going to have one and let us let's us do a quick recap so here what I did is I added my rules for my policy I defined it and I told net that this is what you need to follow and then here I have activated this policy so when my application is running it will actually go in Fetch these configuration for my policies and it actually execute them so now let's run them so both of them are stopped perfect so I'm just going to put nut run and this is going to run my API perfect I'm going to put not run for my client which is going to be my blazer application both of them are running let's go back to my web browser I'm going to go to home and click on refresh we can see everything is happily running go to drivers and as you can see directly I started to get my information from my apis if I click on add the driver I'm going to put here Muhammad L One driver number let's say 23 and I'm going to put very simple date of birth save and we can see it's actually saving and running if I go to network we can see I'm doing all of the calls for my API I'm getting a gap uh 200 I'm getting a 2011 for my post and basically all of these are actually working as they should be and this is basically what course allows us to do as a quick um integration between different endpoints uh between two different domains and we can see how course actually facilitated this communication and actually give us control on which client can be able to do what inside our application I hope this video was helpful please like share and subscribe it twice if you have any question please make sure you put them in the comments Down Below have a great day

Channel: Mohamad Lawand

Views: 2,969

Keywords: .NET, dotnet, asp.net core, c#, csharp, backend, frontend, CORS, CORS Tutorial, Web Development, Cross Origin Resource Sharing, ASP.NET Tutorial, Web Security, Backend Development, Coding Tutorial, DotNet Development, Web Application Security, Programming Tips, Learn Coding, Software Development, Tech Tutorial, Web Dev Tips, Full Stack Development, Security Best Practices, Developer Skills, Coding Best Practices, blazor

Id: WAKsZwzXhf4

Length: 14min 5sec (845 seconds)

Published: Wed Jan 03 2024