角与ASP项目。NET Web API项目

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

我有一个解决方案，在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.

其中一个包含了我客户端SPA的所有角化文件。而另一个则是ASP。NET web api项目，作为角前端发出的http调用的端点。

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

我正在使用角CLI和ng-serve将我的角应用程序部署到localhost:4200

The web api is deployed to localhost:6463

web api部署到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.

在生产环境中，它们将位于相同的域中。但是，在开发中，它们并不位于与本地主机端口不同的相同域中。迫使我实现CORS作为角应用程序必须与web api对话。

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

对我来说，仅为开发的目的实现CORS似乎不太理想。

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

有更好的结构吗?或者我有什么遗漏吗?

3 个解决方案

#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":

您需要启用CORS。根据微软官方文件为ASP。NET Core，在关于跨产地来源要求的一节中，他们提供了“相同产地”的定义:

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:

如果两个url具有相同的模式、主机和端口，则它们具有相同的起源。(RFC 6454)这两个网址的来源相同:

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

These URLs have different origins than the previous two:

这些url的起源与前两个不同:

• http://example.net - Different domain
• http://example.net不同领域
• http://www.example.com/foo.html - Different subdomain
• http://www.example.com/foo.html不同子域
• https://example.com/foo.html - Different scheme
• https://example.com/foo.html不同方案
• http://example.com:9000/foo.html - Different port ⇦ ⇦ ⇦ ⇦ Your Issue
• http://example.com:9000 / foo.html -不同的端口⇦⇦⇦⇦你的问题

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

注意:Internet Explorer在比较起源时不考虑端口。

How to enable CORS

A quick way to enable CORS for you case:

一种快速的方法为你的案例:

Startup.cs

Startup.cs

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

---

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

更新:根据本教程，没有CORS也可以这样做。

Proxy to the API

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

您需要创建一个名为proxy.conf的文件。前端目录中的json:

{
  "/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.

目标值包含一个端口号。如果您正在使用Visual Studio，您可以从后端项目属性中读取它。

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

这将把所有的API请求传递给正在运行的ASP。网络核心应用程序。

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:

这里我们需要做的最后一件事是修改npm开始脚本，因此它使用代理配置。打开的包。在前端项目中，找到脚本部分并修改start命令:

"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.

要使用这个应用程序，您需要同时启动ng dev服务器和ASP。网络应用程序。第一个是从前端目录执行的命令npm start开始的。后端应用程序可以从Visual Studio启动，也可以通过运行dotnet watch命令行启动。如果使用命令行版本，请小心使用的端口，并在代理配置文件中正确设置。dotnet中的watch命令监视应用程序中的更改，并在更改任何内容时重新构建。

#2

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.

如果您不想在后台更改任何内容，并且您正在使用Chrome进行开发，您可以使用像Moesif Origin & CORS change这样的扩展。

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.

下载并安装扩展，然后通过Chrome右上角的图标激活它。右键单击图标并单击选项。现在，您可以根据自己的喜好修改源文件和访问控制-允许-头文件。

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.

下面是我使用ASP提出的一个示例请求。净芯和角线。角dev服务器在端口4200上运行，后端在端口53632上运行。

Request without enabling the extension:

请求不启用扩展:

Enable the extension and override origin:

启用扩展和覆盖原点:

and now the Origin-Header has been changed:

现在原始头已经改变了:

#3

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

在ASP中启用CORS。NET Web API 2站点可以遵循这里的说明。

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

要开始，您必须在您的包管理器控制台中添加CORS NuGet包，并使用以下命令:

Install-Package Microsoft.AspNet.WebApi.Cors

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

然后在WebApiConfig中添加如下一行。注册方法:

config.EnableCors();

Then, edit your api controller class to include:

然后，编辑您的api控制器类，包括:

using System.Web.Http.Cors;

and add the CORS attribute before the controller class declaration:

在控制器类声明前添加CORS属性:

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