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

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

其中一个包含客户端SPA的所有角度文件。另一个是ASP.NET web api项目，它作为前端进行http调用的端点

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

web api已部署到localhost:6463

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

在我看来，仅仅为了开发目的而实施CORS似乎不太理想

有更好的结构吗？还是我遗漏了什么

简单回答 否。有关更新的答案，请参阅下面的代理部分

您需要启用CORS。根据，在关于跨来源请求（COR）的章节中，他们提供了“相同来源”的定义：

什么是“同源”？ 如果两个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"));

---

更新： 根据研究，可能不需要CORS就可以做到这一点

API的代理 您需要在前端目录中创建一个名为

proxy.conf.json

的文件：

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

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

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

这里我们需要做的最后一件事是修改npm启动脚本，以便它使用代理配置。在前端项目中打开

package.json

，找到脚本部分并修改start命令以：

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

要使用该应用程序，您需要同时启动ng dev服务器和ASP.NET应用程序。第一个是从前端目录执行命令

npm start

启动的。后端应用程序可以从Visual Studio启动，也可以通过

dotnet watch run

命令行启动。如果使用命令行版本，请注意它使用的端口，并在代理配置文件中正确设置它。dotnet中的watch命令监视应用程序中的更改，并在您更改某些内容时重新构建应用程序。

Chrome浏览器扩展解决方案 如果您不想更改后端中的任何内容，并且正在使用Chrome进行开发，则可以使用类似的扩展

它允许您覆盖浏览器请求的

来源

和

访问控制允许

标题

下载并安装扩展，然后通过Chrome右上角的图标激活它。右键单击图标，然后单击

选项

。 现在，您可以根据自己的喜好修改

Origin

和

accesscontrolallow-

标题

这完全是为了在本地主机上开发，完成后不要忘记停用扩展

---

下面是我使用ASP.NET Core和Angular CLI发出的请求示例。 Angular dev服务器在端口

4200

上运行，后端在端口

53632

上运行

不启用扩展的请求：

启用扩展并覆盖原点：

---

现在，

来源

-标题已更改：

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

要开始，您必须在package Manager控制台中使用以下命令添加CORS NuGet包：

Install-Package Microsoft.AspNet.WebApi.Cors

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

config.EnableCors();

然后，编辑api

controller

类以包括：

using System.Web.Http.Cors;

并在

控制器

类声明之前添加CORS属性：

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