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

Question

我在Visual Studio 2017中有两个项目的解决方案。其中一个包含所有Angular客户端SPA文件，而另一个是ASP.NET Web API项目，用作Angular前端所发出的http调用的终点。

我使用Angular CLI和ng-serve将我的Angular应用部署到localhost：4200上。

Web API部署到localhost：6463。

在生产环境中，它们将位于同一域下。但在开发过程中，它们不在同一域下，因为localhost的端口不同。这迫使我实现CORS，因为Angular应用程序必须与Web API通信。

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

是否有更好的结构？或者我漏掉了什么？

- prawn

Answer 1

简单回答

不行。 请参见下面的代理部分获取更新的答案。

您需要启用CORS。根据ASP.NET Core官方Microsoft文档中有关跨源请求（CORS）的定义，其中提供了"同源"的定义：

什么是"同源"？

如果两个URL具有相同的方案、主机和端口，则它们具有相同的来源。（RFC 6454）
这两个URL具有相同的来源：

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

这些URL与前两个URL具有不同的来源：

• http://example.net - 不同的域名
• http://www.example.com/foo.html - 不同的子域名
• https://example.com/foo.html - 不同的协议
• http://example.com:9000/foo.html - 不同的端口 ⇦ ⇦ ⇦ ⇦ 您的问题

注意：
Internet Explorer在比较来源时不考虑端口。

如何启用CORS

启用CORS的快速方法：

Startup.cs

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

---

更新： 根据这篇教程，可能不需要CORS也可以实现。

代理API

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

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

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

这将把所有API请求传递到正在运行的ASP.NET Core应用程序。

在这里我们需要做的最后一件事是修改npm start脚本，使其使用代理配置。在Frontend项目中打开package.json，找到scripts部分并修改start命令为：

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

要开始应用程序的工作，您需要同时启动ng开发服务器和ASP.NET应用程序。首先，在前端目录中执行命令npm start来启动第一个。后端应用程序可以从Visual Studio或使用dotnet watch run在命令行中启动。如果您使用命令行版本，请注意它使用的端口，并在代理配置文件中正确设置它。Dotnet中的watch命令会监视应用程序中的更改，并在每次更改时重新构建它。

- Svek

Answer 2

为了在ASP.NET Web API 2网站中启用CORS，您可以按照这里的说明进行操作。

首先，在包管理器控制台中使用以下命令添加CORS NuGet包：

Install-Package Microsoft.AspNet.WebApi.Cors

然后在你的WebApiConfig.Register方法中添加以下行：

config.EnableCors();

然后，编辑您的API 控制器 类以包括：

using System.Web.Http.Cors;

在 controller 类声明之前添加 CORS 属性:

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

- Dylan Smith

Answer 3

通过浏览器扩展程序解决Chrome跨域问题

如果您不想在后端进行任何更改，并且正在使用Chrome进行开发，则可以使用像Moesif Origin & CORS Changer这样的扩展程序。

它允许您覆盖浏览器请求的Origin和Access-Control-Allow头。

下载并安装扩展程序，然后通过Chrome右上角的图标激活它。右键单击该图标，然后单击选项。 现在，您可以根据自己的喜好修改Origin和Access-Control-Allow-头。

这仅适用于本地主机开发，请勿忘记在完成后停用扩展程序！

---

这是我使用ASP.NET Core和Angular CLI制作的示例请求。

Angular开发服务器运行在端口4200上，后端运行在端口53632上。

未启用扩展名的请求：

启用扩展名并覆盖来源：

现在Origin-Header已更改：

- mtx