【问题标题】：Angular project with ASP.NET Web API project in Visual StudioVisual Studio 中带有 ASP.NET Web API 项目的 Angular 项目
【发布时间】：2017-10-28 01:46:26
【问题描述】：

我在 Visual Studio 2017 中有两个项目的解决方案。

一个包含我用于客户端 SPA 的所有 Angular 文件。而另一个是一个 ASP.NET web api 项目，用作 Angular 前端进行的 http 调用的端点。

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

web api 部署到 localhost:6463

在生产环境中，它们将在同一个域下。但是，在开发中，它们不在同一个域中，因为 localhost 的端口不同。迫使我实现 CORS，因为 Angular 应用程序必须与 web api 对话。

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

有更好的结构吗？或者有什么我想念的吗？

【问题讨论】：

标签： c# asp.net angular cors asp.net-web-api2

【解决方案1】：

简单回答

否。 请参阅下面的代理部分以获取更新的答案。

您需要启用 CORS。根据Official Microsoft Documentation for ASP.NET Core，在关于跨域请求（CORS）的部分下，他们提供了“同源”的定义：

什么是“同源”？

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

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

这些 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"));

更新： 根据this tutorial 的说法，没有CORS 也可以做到。

API 代理

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

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

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

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

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

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

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

【讨论】：

【解决方案2】：

要在 ASP.NET Web API 2 站点中启用 CORS，您可以按照说明进行操作 here。

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

Install-Package Microsoft.AspNet.WebApi.Cors

然后将以下行添加到您的 WebApiConfig.Register 方法中：

config.EnableCors();

然后，编辑您的 api controller 类以包含：

using System.Web.Http.Cors;

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

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

【讨论】：

【解决方案3】：

通过浏览器扩展的 Chrome 解决方案

如果您不想更改后端中的任何内容并且使用 Chrome 进行开发，则可以使用类似 Moesif Origin & CORS Changer 的扩展程序。

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

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

这仅限于在 localhost 上开发，完成后不要忘记停用扩展！

这是我使用 ASP.NET Core 和 Angular CLI 发出的示例请求。 Angular 开发服务器在端口 4200 上运行，后端在端口 53632 上运行。

请求不启用扩展：

启用扩展并覆盖原点：

现在Origin-Header 已更改：

【讨论】：