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

Question

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?

Answer 1

Simple Answer

No. See the proxy section below for updated answer.

You will need to enable CORS. According to the Official Microsoft Documentation for ASP.NET Core, under the section about Cross-Origin Requests (CORS) they provide the definition of "same origin":

What is "same origin"?

Two URLs have the same origin if they have identical schemes, hosts, and ports. (RFC 6454)
These two URLs have the same origin:

• http://example.com/foo.html
• http://example.com/bar.html

These URLs have different origins than the previous two:

• http://example.net - Different domain
• http://www.example.com/foo.html - Different subdomain
• https://example.com/foo.html - Different scheme
• http://example.com:9000/foo.html - Different port ⇦ ⇦ ⇦ ⇦ Your Issue

Note:
Internet Explorer does not consider the port when comparing origins.

How to enable CORS

A quick way to enable CORS for you case:

Startup.cs

app.UseCors(builder => builder.WithOrigins("localhost"));

---

Update: According to this tutorial, it might be possible to do it without CORS.

Proxy to the API

You need to create a file called proxy.conf.json in the Frontend directory:

{
  "/api": {
    "target": "http://localhost:65498",
    "secure": false
  }
}

The target value contains a port number. If you’re using Visual Studio, you can read it from Backend project properties.

This will pass all the API requests to the running ASP.NET Core application.

The last thing we need to do here is to modify npm start script, so it uses the proxy configuration. Open package.json in the Frontend project, find the scripts section and modify start command to:

"start": "ng serve --proxy-config proxy.conf.json"

To work on the app, you need to start both, ng dev server and ASP.NET application. The first one is started with the command npm start executed from the Frontend directory. Backend app can be started from the Visual Studio or also command line with dotnet watch run. If you use the command line version, be careful about the port it uses and set it up properly in the proxy config file. The watch command in dotnet watches for changes in the application and rebuilds it whenever you change something.

Answer 2

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: "*")]