Angular project with ASP.NET Web API project in Visual Studio
I have a solution with two projects in Visual Studio 2017.
One contains all my Angular files for the client side SPA client. While the other is a web api ASP.NET project that serves as an endpoint for http calls made by the Angular frontend.
I am using Angular CLI and ng-serve to deploy my Angular app to localhost: 4200
The web api is deployed to localhost: 6463
In a production environment, they will be in the same domain. However, in development, they are not in the same domain as the port for localhost. Forcing me to implement CORS as Angular app needs to talk to web api.
It seems less ideal to me for a CORS implementation only for development purposes.
Is there a better structure? Or is there something I am missing?
source to share
Simple answer
Not. See the proxy section below for an updated answer.
You will need to enable CORS. According to the Microsoft Official Documentation for ASP.NET Core under Cross Origin Requests (CORS), they provide a definition of "same origin":
What is "same origin"?
Two URLs have the same origin if they have the same 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 question
Note:
Internet Explorer does not consider port when comparing origins.
How to enable CORS
A quick way to enable CORS for you:
Startup.cs
app.UseCors(builder => builder.WithOrigins("localhost"));
Update: According to this tutorial , it might be possible to do this without CORS.
API proxy
You need to create a file named proxy.conf.json
in the Frontend directory:
{
"/api": {
"target": "http://localhost:65498",
"secure": false
}
}
The target value contains the port number. If you are using Visual Studio, you can read it from the Backend project properties.
This will pass all API requests to the ASP.NET Core executable application.
The last thing we need to do is change the npm start script so it uses the proxy config. Open package.json
the Frontend in the project, find the scripts section and change the start command:
"start": "ng serve --proxy-config proxy.conf.json"
To work with the application, you need to run both ng dev servers and ASP.NET application. The first is started by a command npm start
executed from the Frontend directory. The Backend application can be launched from Visual Studio or from the command line using dotnet watch run
. If you are using the command line version, be careful with the port it uses and configure it correctly in the proxy config file. The dotnet watch command watches for changes in the application and rebuilds them whenever you change something.
source to share
Solution for Chrome via browser extension
If you don't want to change anything in your backend and are using Chrome for development, you can use an extension like Moesif Origin and CORS Changer .
This allows you to override browser headers Origin
and Access-Control-Allow
requests.
Download and install the extension, then activate it using the icon in the upper right corner of Chrome. Right-click the icon and click Options
. Now you can change the titles Origin
and Access-Control-Allow-
to your liking.
This is strictly for development on localhost, DO NOT forget to deactivate the extension when done!
Here is an example request I made using ASP.NET Core and Angular CLI. Angular dev server runs on port 4200
and server runs on 53632
.
Request without including the extension: 
Include extension and override start: 
and the Origin
-Header has now been changed : 
source to share
To enable CORS on an ASP.NET Web API 2 site, you can follow the instructions here .
To get started, you have to add the CORS NuGet package with the following command in the Package Manager Console:
Install-Package Microsoft.AspNet.WebApi.Cors
Then add the following line to your WebApiConfig.Register method:
config.EnableCors();
Then edit the api class controller
to include:
using System.Web.Http.Cors;
and add CORS attribute before class declaration controller
:
[EnableCors(origins: "http://localhost:4200", headers: "*", methods: "*")]
source to share