通过 HTTPS GET 链接向控制器调用 Angular 8 WebAPI 方法 [英] Calling an Angular 8 WebAPI method to a contoller through a HTTPS GET link

问题描述

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

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

例如:

<块引用>

我有哪些选择?我是否应该在 SPA 应用范围之外托管 Web api?

这是默认路由配置:

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

编辑 2:

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

<预><代码>...@NgModule({进口:[RouterModule.forRoot(APP_ROUTES, { enableTracing: true })],...

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

在 IIS Express 下的调试器中运行的相同应用程序有效:URL 按原样发送到服务器，角度路由器不执行任何操作.

确实很奇怪.

编辑 3:

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

解决方案

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

默认情况下，您的域将查找 Angular 路由(因为大多数 Angular 应用程序将 SpaRewriteRule 提及为 "*"，否则您的 IIS 托管应用程序将路由到 Controller/Action 方法路由)，如果您想限制特定 url 的角度路由，您需要在 web.config 文件中添加重写 URL 配置

<规则><规则名称="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"/></条件><action type="重写" url="/index.html"/></规则><规则名称="ApiProxyRule" stopProcessing="true">//添加这条规则<match url="api/(.*)"/><action type="Rewrite" url="http://YOUR_API_URLS/api/{R:1}"/></规则></规则></rewrite>

I'm running an Angular 8 SPA application hosted on ASP.NET Core 3.1 hosted in IIS 10.

I have a use case where the user of the application receives an email that contains an hyperlink to a Web API controller method.

For instance:

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

When this URL is used through an HTTP client (ARC in my case), it works.

If it is used through the default browser, also hosting the SPA Application, it fails without reaching the server as is. It is rewritten to reach the notFound component:

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

Here is the controller method:

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

The component:

What are my options here? Should I host a Web api outside the scope of the SPA App?

EDIT: Here is the default routing configuration:

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?}");
});

EDIT 2:

To prove my point that the request never reaches the server, I've enabled Angular router tracing in app.router.ts:

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

I can see that the Angular router logic is processing my request and redirects to the notFound component.

The same app run in the debugger under IIS Express works: The URL is sent to the server as is, the angular router does nothing.

Very strange indeed.

EDIT 3:

This works with IIS Express / Angular Live development server because they're using differents ports.

解决方案

you need to add URL rewrite rules/settings for your API in web.config file.

by default your domain will look for angular routing (since most of the angular apps will mention SpaRewriteRule as "*" or else your IIS hosted application will route to Controller/Action method routes), if you want to restrict angular routing for specific urls you need to add rewrite URL config in web.config file

<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>

这篇关于通过 HTTPS GET 链接向控制器调用 Angular 8 WebAPI 方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！