From the course: Advanced ASP.NET Web API 2.2

Enabling CORS

From the course: Advanced ASP.NET Web API 2.2

Start my 1-month free trial Buy for my team

Enabling CORS

“

- Before we enable CORS in our application, let us go to Visual Studio and see what we have. So in here now you can see two projects. We have an MVC web client, which has just a view inside the on controller. It has a button with the text, "Get All Students". Now, when you click this button, the Get All Students method is going to be called, which could aid an ajax request of type, get, in this service URL that we have defined in line 14. Now, to get this value, go to your web api.dependenceinjectionproject, at properties, at APWeb, you'll find it's value. Copy this value. Go to your index.csharp html file place it here, and write "/api/students". Let us save the "Genius" and Ron Both projects at the same time. To Ron Both project, right click, go to properties, and at AP Startup Project, choose the Multiple Startup Project, and therefore, the MVC Web Client, change the action to start, and for the Dependency Injection Project, to start as well. Now click the Start button in here to run these projects. So, let us copy the API in here where I can hear API students. So we see that we get a response and in our MVC app, we have just a button, "Get All Students". But before we click the "Get All Students" button, press F12, and then go to the Console. If you have any results in here just clear the Console by pressing the "Clear Console" button here and then click the "Get All Students". So here we see that we are going to get an error, which is related to the CORS policy, which says that, "No Excess Control Allow Origin Header" is present on the requested resource. Which means that now we need to go to our Web API project and enable CORS policy. So, let us go to Visual Studio, stop the application, and then open the package, Manager Console. In case you don't see this tab in here, go to tools, then look at Package Manager, then Package Manager Console. From the projects in here, choose as a default project the Dependency Injection one. And the first thing that we need to do that we need to install the WebAPI cors. So, let us write in here: "Install - Package Microsoft.AspNet.WebApi .Cors So now that we installed this package, let us go and configure it in our WebAPI project. So go in here. Then inside the App Start Folder In here let us write, "CORS configuration". In here write, "config.EnableCors. And let us go to our controller. So inside the controllers, go to Student's Controller. Here, just before the student's controller, write, "EnableCors". Let us import the necessary name space, which is the Web.http.Cors. And as a parameter, we are going to just define here three stars, and we are going to talk about them in more details in the upcoming part. So, we see that we have defined the Origins, the Headers, and the Methods. Let us save the genius end around these projects one more time. If we click now the "Get All Student's" button and open the console, you are going to see that we have an array of two student objects.

Contents