Visual Studio 中带有 ASP.NET Web API 项目的 Angular 项目

Posted 2023-03-04

【中文标题】Visual Studio 中带有 ASP.NET Web API 项目的 Angular 项目

【英文标题】：Angular project with ASP.NET Web API project in Visual Studio

【发布时间】：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 似乎不太理想。

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

【参考方案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 已更改：