如何在 .NET Core 3.1 WebAPI 中托管 Angular 应用程序？

Question

我想通过根路径/和 REST API 通过/api/*提供我的 Angular 应用程序。 For the Angular routing I have to redirect all requests to /index.html except the requests for existing files (eg media files) and my API controller routes.

有了下面的Startup.cs ，它就可以工作了：

• Opening http://localhost:5000 will return the index.html and the angular routing is working, that I get redirected to http://localhost:5000/home
• API 调用仍在工作
• 返回现有的 CSS/JavaScript 文件

以下不起作用：刷新或直接打开http://localhost:5000/home会以 404 结束。我猜/home没有重定向到 index.html。 我在这里缺少什么？

public class Startup
{
    private readonly IWebHostEnvironment _webHostEnvironment;

    public Startup(IWebHostEnvironment webHostEnvironment)
    {
      _webHostEnvironment = webHostEnvironment;
    }
    public void ConfigureServices(IServiceCollection services)
    {        
      services.AddSpaStaticFiles(options =>
      {
        options.RootPath = "wwwroot";
      });

      services.AddControllers();
    }

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
      app.UseDefaultFiles();
      app.UseSpaStaticFiles();
      app.UseCors();
      app.UseSwagger();
      app.UseSwaggerUI(c => { /*...*/ });
      app.UseRouting();
      app.UseEndpoints(endpoints => { endpoints.MapControllers(); });
    }
}

Answer 1

对于 SPA 托管，您缺少一件重要的事情：

app.UseSpa(spa =>
{
    // To learn more about options for serving an Angular SPA from ASP.NET Core,
    // see https://go.microsoft.com/fwlink/?linkid=864501
});

通过返回单页应用程序 (SPA) 的默认页面来处理中间件链中的所有请求。

这个中间件应该放在链的后面，以便为 static 文件、MVC 操作等提供服务的其他中间件优先。

- https://docs.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.builder.spaapplicationbuilderextensions.usespa

---

更新：如果您只想 map 到 index.html 的特定路线，即以http://localhost/ui/开头的所有内容，您可以将其与app.MapWhen结合使用

app.MapWhen(
    context => context.Request.Path.StartsWithSegments("/ui/", StringComparison.OrdinalIgnoreCase), 
    cfg => 
    {
        cfg.UseSpa(spa =>
        {
            // To learn more about options for serving an Angular SPA from ASP.NET Core,
            // see https://go.microsoft.com/fwlink/?linkid=864501
        });
    }
);

Answer 2

我有同样的问题，但app.UseSpa(...)没有工作，因为我想我错过了一些依赖。

或者你可以添加endpoints.MapFallbackToFile("/index.html"); 在app.UseEndpoints(..)中，它是Microsoft.AspNetCore.StaticFiles程序集的一部分。

所以它看起来像这样：

app.UseEndpoints(endpoints =>
{
    endpoints.MapControllers();
    endpoints.MapFallbackToFile("/index.html");
});

来源： https://weblog.west-wind.com/posts/2020/Jul/12/Handling-SPA-Fallback-Paths-in-a-Generic-ASPNET-Core-Server#server-side-navigation-of-客户端路由