在同一端口上运行 Angular 和 ASP.NET Web API

Question

我目前正在使用 angular 向运行 ASP.NET 的 API 服务器发出 API 调用。 但是，对于角度开发，我有一个跨域问题，我使用的是本地主机。 在生产版本中，它们都将使用 IIS 在同一域下运行。

有没有办法在与 ASP.NET 相同的端口上运行 angular 应用程序？

PS：我也对解决此问题的其他替代方案持开放态度。

Answer 1

我遇到了同样的问题，然后我在 medium 上找到了这篇文章，希望这对你有用。

编辑：实际上我使用的解决方案来自那篇文章。

这个想法是你不能在同一个端口上“发布”API 和 Angular 应用程序，但你可以使用代理从 Angular 应用程序连接到另一个端口上的 API。

更新：很抱歉很久以前没有回答这个问题。

要处理 cors 问题（在这种情况下），您可以使用带有ng serve命令的代理。

例如，在我的情况下，我使用了这样的proxy.conf.json文件：

{
  "/api/*": {
    "target": "http://localhost:3000",
    "secure": false,
    "pathRewrite": {"^/api" : ""}
  }
}

此代码将/api/*每个请求的 url 重写为您的 api 正在侦听的http://localhost:3000 。

因此，为了说明，如果您在 angular 中发出类似http://localhost:4200/api/users的请求，它将被重定向/重写到http://localhost:3000/api/users解决 cors 问题。

现在，您必须运行 Angular 应用程序的方式有所不同。

ng serve --proxy-config proxy.conf.json

Answer 2

我能够通过 IIS 成功实现这一目标！ 我知道这篇文章很旧，但希望它能为寻求解决方案的人节省时间:)

首先（只是提醒）确保您在 IIS 机器上安装了 .NET Core Hosting Bundle（链接可以在这里找到）。 请记住，它至少需要 WinSrvr2012R2 才能运行。 现在将发布的 .net core API 解决方案文件夹复制到服务器。 Angular 也一样 - 下一个提醒：执行ng build --prod然后将dist文件夹复制到服务器。 然后配置 IIS - 创建一个指向 Angular 应用程序文件夹的新网站。 此时您的 Angular 应用程序应该可以运行（但显然还没有 API）。

转到应用程序池 - 您将看到为您的应用程序创建的池。 打开基本设置并将 CLR 版本更改为“无托管代码”。

最后，单击您的网站并在其下“添加应用程序”。 指向 dotnet core API 文件夹并使用一些短别名命名它。 现在您应该有一个包含应用程序的网站结构。

如果您的 Angular 应用 URL 是：

https://myiissrvr/

您的 API 位于：

https://myiissrvr/[ALIAS]/

完毕

最后说明：

通常，Web API 使用 URL 结构，如

https://myiissrvr/api/[controller]/[action]

所以捆绑在一起后，它看起来像：

https://myiissrvr/[ALIAS]/api/[controller]/[action]

使用这种方法，您应该能够在静态服务的 Angular 网站下附加多个 Web API 服务——每个服务都有自己的别名。 在许多情况下，它可能很有用。