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

Posted 2023-03-04

【中文标题】在同一个端口上运行 Angular 和 ASP.NET Web API

【英文标题】：Run Angular and ASP.NET Web API on the same port

【发布时间】：2018-11-18 02:06:24

【问题描述】：

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

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

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

【问题讨论】：

它们不能在同一个端口上运行，但您可以配置代理将您的请求路由到您的 api

我认为你可以子域 api .. api.example.com

【参考方案1】：

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

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

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

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

如果您的 Angular 应用 URL 是：

https://myiis-s-rvr/

您的 API 位于：

https://myiis-s-rvr/[ALIAS]/

完成

最后的评论：

通常，Web API 使用像

这样的 URL 结构

https://myiis-s-rvr/api/[controller]/[action]

所以捆绑在一起后，它会是这样的：

https://myiis-s-rvr/[ALIAS]/api/[controller]/[action]

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

【讨论】：

Angular 路由覆盖 API 路由，当我尝试进行 API 调用时，由于请求由 Angular 管理，我收到错误 404，你知道我该如何解决吗？

我猜这与您用于 Angular 应用程序的 web.config 文件有关。请尝试用 google 搜索或使用 web.config 详细信息提出新问题。

效果很好。谢谢

【参考方案2】：

我遇到了同样的问题，然后我找到了this post on medium，希望这对你有用。

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

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

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

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

例如，就我而言，我使用了这样的proxy.conf.json 文件：

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

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

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

现在，运行 Angular 应用程序的方式不同了。

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

【讨论】：

“这个想法是你不能在同一个端口上“发布”API 和 Angular 应用程序”我应该说这不是真的，而且非常具有误导性。当然，您可以将 asp.net core web api 和 angular 应用程序捆绑在一个项目中，并将其发布到同一个端口。您需要的唯一技巧是在 Startup.cs 中添加一个路由规则，如下所示： routes.MapRoute( name: "api", template: "api/controller/action=Index/id?" );

@SilentSojourner 如果 .net 核心 api 和 angular 应用程序一起“创建”（VIsual Studio 允许此选项）并且 api 只是在 / 上将应用程序作为静态文件提供服务，这是可能的路线。这样，api 将所有从/api/... 路由到控制器，从/... 路由到角度和他自己的路由。在所有其他方面，您应该在角度方面使用一些代理来处理诸如 CORS 之类的问题。