Angular project with ASP.NET Web API project in Visual Studio

user_2684106 0
Viewed 2858

I have a solution with two projects in Visual Studio 2017.

One contains all of my Angular files for client side SPA. While the other is a ASP.NET web api project that serves as an endpoint for http calls made by the Angular front end.

I'm using Angular CLI and ng-serve to deploy my angular application to localhost:4200

The web api is deployed to localhost:6463

In a production environment, they would be under the same domain. However, in development they are not in the same domain as the port differs for localhost. Forcing me to implement CORS as the Angular app has to talk to the web api.

To me, it seems less than ideal to implement CORS for the purposes of development only.

Is there a better structure? Or is there anything that I am missing?

asp.net-web-api2 angular cors asp.net c#
3 Answers

To enable CORS in a ASP.NET Web API 2 site you can follow the instructions here.

To start you have to add the CORS NuGet package with the following command in your Package Manager Console:

Install-Package Microsoft.AspNet.WebApi.Cors

Then add the following line to your WebApiConfig.Register method:

config.EnableCors();

Then, edit your api controller class to include:

using System.Web.Http.Cors;

and add the CORS attribute before the controller class declaration:

[EnableCors(origins: "http://localhost:4200", headers: "*", methods: "*")]
user_48598460
Related