Visual Studio中使用ASP.NET Web API项目的Angular项目

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

Answer 3

Solution for Chrome via browser extension

If you don't want to change anything in your backend and you are using Chrome for development, you can use an extension like Moesif Origin & CORS Changer .

It allows you to override the Origin and Access-Control-Allow headers of the browser's request.

Download and install the extension, then activate it via the icon in the top right of Chrome. Right click the icon and click Options . Now you can modify the Origin and Access-Control-Allow- headers to your liking.

This is strictly for development on localhost, DO NOT forget to deactivate the extension when you are done!

---

Here is an example request i made using ASP.NET Core and Angular CLI. The Angular dev server runs on port 4200 and the backend on port 53632 .

Request without enabling the extension:

Enable the extension and override origin:

and now the Origin -Header has been changed: