Calling an Angular 8 WebAPI method to a contoller through a HTTPS GET link

问题

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.

回答1:

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>

回答2:

I think that Api is always be hidden. If you want to call api, you only do this from angular.

Email contains a url path to angular route instead of api and you should create a component to route what handle this url with params and call api.

来源：https://stackoverflow.com/questions/60165752/calling-an-angular-8-webapi-method-to-a-contoller-through-a-https-get-link

标签

angular

asp.net-core

single-page-application

angular8