如何在Blazor Hybrid应用中集成控制器？

• 初始化完整的ASP.NET Core请求管道
  Blazor Hybrid的WebView不会自动启动ASP.NET Core请求管道，必须手动配置并启动WebApplication实例，否则控制器和端点无法被路由到。修改代码如下：

var builder = WebApplication.CreateBuilder();
builder.Services.AddControllers();
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();
builder.Services.AddServerSideBlazor();
builder.Services.AddBlazorWebViewDeveloperTools();
builder.Services.AddWindowsFormsBlazorWebView();

var webapp = builder.Build();

// 配置中间件管道
if (webapp.Environment.IsDevelopment())
{
    webapp.UseSwagger();
    webapp.UseSwaggerUI();
}
// 加载Angular静态资源必须的中间件
webapp.UseStaticFiles();
webapp.UseRouting();
// 映射控制器路由
webapp.MapControllers();
// 注册测试端点
webapp.MapGet("/api/testendpoint", () => "test");
webapp.MapBlazorHub();

// 异步启动Web应用，避免阻塞UI线程
_ = webapp.RunAsync();

// 配置WebView
webView.HostPage = @"dist\index.html"; 
webView.Services = webapp.Services;

• 配置WebView基础地址
  WebView的基础地址必须和WebApplication运行的地址一致，确保API请求路径匹配：

// 指定WebApplication运行端口
_ = webapp.RunAsync("http://localhost:5000/");
// 设置WebView基础地址
webView.BaseAddress = "http://localhost:5000/";

• MAUI Blazor Hybrid适配方案
  如果使用MAUI，无需手动调用RunAsync()，在MauiProgram.cs中完成管道配置：

var builder = MauiApp.CreateBuilder();
builder
    .UseMauiApp<App>()
    .ConfigureFonts(fonts =>
    {
        fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
    });

builder.Services.AddControllers();
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();
builder.Services.AddMauiBlazorWebView();
#if DEBUG
builder.Services.AddBlazorWebViewDeveloperTools();
#endif

var app = builder.Build();

// 配置ASP.NET Core管道
var webApp = app.Services.GetRequiredService<WebApplication>();
webApp.UseStaticFiles();
webApp.UseRouting();
webApp.MapControllers();
webApp.MapGet("/api/testendpoint", () => "test");
webApp.MapBlazorHub();

return app;

同时在XAML中指定BlazorWebView的基础地址：

<BlazorWebView HostPage="wwwroot/dist/index.html" BaseAddress="http://localhost:5000/" />

• 验证Angular请求路径
  确保Angular代码中的API请求路径与配置的地址一致，可使用相对路径（依赖BaseAddress配置）或完整地址：

// Angular中调用API示例
this.http.get('/api/testendpoint').subscribe(response => {
    console.log(response);
});

内容的提问来源于stack exchange，提问作者curious slab