通过 HTTPS GET 链接向控制器调用 Angular 8 Web API 方法答案

【问题标题】：Calling an Angular 8 WebAPI method to a contoller through a HTTPS GET link通过 HTTPS GET 链接向控制器调用 Angular 8 Web API 方法
【发布时间】：2020-05-26 16:15:43
【问题描述】：

我正在运行托管在 IIS 10 中托管的 ASP.NET Core 3.1 上的 Angular 8 SPA 应用程序。

我有一个用例，应用程序的用户收到一封电子邮件，其中包含指向 Web API 控制器方法的超链接。

例如：

https://test.myapp.fr/api/ExternalCommands/ManageDati?a=C3hl5%2FMgXdldyX4ssmgyayMP3xE%2Bi%2

当通过 HTTP 客户端（在我的例子中为 ARC）使用此 URL 时，它可以工作。

如果通过默认浏览器使用它，同时托管 SPA 应用程序，它会失败而无法按原样到达服务器。它被重写以到达 notFound 组件：

https://test.myapp.fr/notFound?a=C3hl5%2FMgXdldyX4ssmgyayMP3xE%2Bi%2

这里是控制器方法：

[HttpGet]
[AllowAnonymous]
public async Task<IActionResult> ManageDati(string a, CancellationToken cancellationToken)
{
}

组件：

我在这里有什么选择？我是否应该在 SPA 应用范围之外托管 Web api？

编辑：这是默认路由配置：

app.UseMvc(routes =>
{
  routes.MapRoute("externalcommands", "api/ExternalCommands/{action}/{id?}", defaults: new { controller = "ExternalCommands", action = "ManageDati" });
  routes.MapRoute(name: "default", template: "api/{controller}/{action}/{id?}");
});

编辑 2：

为了证明我的观点，请求永远不会到达服务器，我在 app.router.ts 中启用了 Angular 路由器跟踪：

...
@NgModule({
  imports: [RouterModule.forRoot(APP_ROUTES, { enableTracing: true })],
...

我可以看到 Angular 路由器逻辑正在处理我的请求并重定向到 notFound 组件。

在 IIS Express 下的调试器中运行的同一个应用程序可以正常工作：URL 按原样发送到服务器，角度路由器什么也不做。

确实很奇怪。

编辑 3：

这适用于 IIS Express / Angular Live 开发服务器，因为它们使用不同的端口。

【问题讨论】：

ManageDati方法的路由是什么？过去我不得不告诉 IIS 使用重写规则忽略“api”请求
我不明白你为什么在路由的末尾有 {id?}。这使得可以使用一个可选参数，例如 test.myapp.fr/api/ExternalCommands/ManageDati/5 是 5 的 id。你需要那个吗？
我使用将 Angular 应用程序部署在 /app 等子文件夹中，然后您对 /api 的请求将到达 IIS
@JavierFromMadrid 是的，我需要这个参数。我会将 api 部署到不同的域来解决我的问题。

标签： c# angular asp.net-core single-page-application angular8

【解决方案1】：

您需要在 web.config 文件中为您的 API 添加 URL 重写规则/设置。

默认情况下，您的域将寻找角度路由（因为大多数角度应用程序会将 SpaRewriteRule 称为 "*" 否则您的 IIS 托管应用程序将路由到控制器/操作方法路由），如果您想限制特定 url 的角度路由，您需要在 web.config 文件中添加重写 URL 配置

<rewrite>
      <rules>
        <rule name="SpaRewriteRule" stopProcessing="true">
          <match url=".*"/>
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true"/>
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true"/>
            <add input="{REQUEST_URI}" pattern="^/(api)" negate="true"/>
          </conditions>
          <action type="Rewrite" url="/index.html"/>
        </rule>
        <rule name="ApiProxyRule" stopProcessing="true"> // add this rule
          <match url="api/(.*)"/> 
          <action type="Rewrite" url="http://YOUR_API_URLS/api/{R:1}"/>
        </rule>
      </rules>
    </rewrite>

【讨论】：

在浏览器中安装 Angular 应用程序后，为时已晚。 Angular 路由将处理所有 URL。

【解决方案2】：

我认为 Api 总是被隐藏的。如果要调用 api，则只能从 angular 执行此操作。

电子邮件包含一个 url 路径而不是 api，您应该创建一个组件来路由使用参数处理此 url 并调用 api 的组件。

【讨论】：