指定从 ASP.NET Core WebApi 提供的 Angular ClientApp 的基本 URL答案

【问题标题】：Specify base URL for Angular ClientApp served from ASP.NET Core WebApi指定从 ASP.NET Core WebApi 提供的 Angular ClientApp 的基本 URL
【发布时间】：2020-01-11 05:24:37
【问题描述】：

我创建了一个 ASP.NET Core 项目，它使用 services.AddSpaStaticFiles()、app.UseSpaStaticFiles()、app.UseSpa() 等为 Angular 应用程序提供服务。

但它直接从http://localhost:1234 为应用程序提供服务，而我想从http://localhost:1234/angular/MyAngularApp1/ 为它提供服务，而我想将http://localhost:1234/ 用于API 控制器。

我怎样才能做到这一点？

注意：我需要它在生产版本中工作。一些解决方案似乎有效，但实际上它们仅在您从 Visual Studio 运行站点时才有效，并且在您发布/部署到 IIS 或 Kestrel 后停止工作。

【问题讨论】：

您能解释一下这种方法的用例吗？我们在一个端口上有 api，在另一个端口上有 angular 应用程序（当然在 api 上有 cors 策略），在生产中，api 在子域中运行
@DaniëlTulp，当然 - 我们的生产版本必须从有防火墙的网络中访问。网络中的客户端无法直接访问我们的应用程序，但是使用 IIS 和 URLRewrite 设置了一个反向代理来重写以特定前缀开头的请求。任何未启动的请求都将被代理丢弃。我们无权重新配置该代理，所以......

标签： c# angular asp.net-core .net-core asp.net-core-mvc

【解决方案1】：

最终我找到了一个几乎可以实现这一点的功能：

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    app.UsePathBase("/MyPrefix/");

    if (env.IsDevelopment())
    .......

请参阅https://www.billbogaiv.com/posts/net-core-hosted-on-subdirectories-in-nginx 了解更多信息。

【讨论】：

【解决方案2】：

您可以像这样为您的应用程序定义一个基本网址

    app.UseMvc(routes =>
    {
        routes.MapRoute(
            name: "default",
            template: "ClientApp/{controller}/{action=Index}/{id?}");
    });

【讨论】：

【解决方案3】：

如果你想为 Angular ClientApp 文件夹中的视图指定基本 URL，请尝试通过转到 ClientApp > src > 来设置 base 的 href 属性strong>index.html 如下所示：

<head>
 <meta charset="utf-8">
 <title>ClientApp</title>
 <base href="/ClientApp">

 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

【讨论】：

【解决方案4】：

你也可以使用

         app.Map(new PathString("/MyPrefix"), appMember =>
         {
             appMember.UseSpa(spa =>
             {
                 spa.Options.SourcePath = "ClientApp";

                 if (env.IsDevelopment())
                 {
                     spa.UseAngularCliServer(npmScript: "start");
                 }
             });
         });

对于 API

app.Map("/api", api => 
    {
        api.UseIdentityServerAuthentication(new IdentityServerAuthenticationOptions
        {
            Authority = "https://localhost:5000/openid"
        });

        api.UseMvc();
    });

因此您可以在同一个应用程序中运行多个并行管道。阅读更多关于它的信息here

【讨论】：