是否可通过Web API代理SPA模式Blazor应用并按指定路径段访问

问题根因 #

原有实现存在三个核心错误，直接导致401/404报错：

1. Blazor应用未配置基础路径为/ui，所有静态资源引用、路由跳转默认基于根路径/，代理/托管后找不到对应资源返回404
2. 路由匹配规则写法错误，Map("/ui/*")不符合ASP.NET Core分支路由规范，无需手动加通配符
3. 授权中间件顺序或分支授权规则配置错误，要么请求未携带有效凭证被拦截返回401，要么静态资源被错误纳入授权校验范围

完整实现方案 #

前置配置：修改Blazor应用基础路径 #

该步骤为必填项，开发/生产环境都需要配置：

• 若为Blazor WebAssembly：修改wwwroot/index.html的base标签为 <base href="/ui/" />
• 若为Blazor Server：修改Pages/_Layout.cshtml的base标签为 <base href="/ui/" />，同时Program.cs中Blazor服务配置增加路径前缀 app.UseBlazorFrameworkFiles("/ui")

场景1：开发环境代理Blazor开发服务器 #

对应你当前用UseProxyToSpaDevelopmentServer的开发场景，WebAPI项目Program.cs按以下顺序配置：

var builder = WebApplication.CreateBuilder(args);

// 原有服务注册逻辑...
// 若需要开启/ui路径授权，在此处完成认证/授权服务注册
builder.Services.AddAuthorization();

var app = builder.Build();

// 中间件顺序不可调整
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthentication(); // 认证中间件必须放在授权之前
app.UseAuthorization(); // 授权中间件必须放在Spa配置之前

// 正确的/ui分支路由配置
app.Map("/ui", uiApp =>
{
    // 需要给/ui路径加授权就取消注释该行，不需要直接删除，不会出现401
    // uiApp.UseAuthorization();
    
    uiApp.UseSpa(spa =>
    {
        // 替换为你的Blazor项目相对WebAPI项目的路径
        spa.Options.SourcePath = "../你的Blazor项目文件夹名";
        spa.UseProxyToSpaDevelopmentServer("https://localhost:44326");
    });
});

// 原有接口路由映射
app.MapControllers();

app.Run();

如果配置授权后仍然报401，请检查Blazor发起的请求是否携带了符合要求的认证凭证（JWT头/认证Cookie），Cookie认证需要额外配置Cookie的Path属性为/ui避免跨路径无法携带

场景2：生产环境静态文件托管 #

Blazor应用发布后，将发布产物全部放到WebAPI项目的wwwroot/ui目录下，替换开发时代理配置即可：

app.Map("/ui", uiApp =>
{
    // 授权配置同上，需要则开启
    // uiApp.UseAuthorization();
    
    uiApp.UseBlazorFrameworkFiles("/ui");
    uiApp.UseStaticFiles(new StaticFileOptions
    {
        RequestPath = "/ui",
        FileProvider = new PhysicalFileProvider(Path.Combine(app.Environment.WebRootPath, "ui"))
    });
    uiApp.UseRouting();
    uiApp.UseEndpoints(endpoints =>
    {
        // 配置Blazor路由 fallback，解决刷新页面404问题
        endpoints.MapFallbackToFile("/ui/{*path:nonfile}", "ui/index.html");
    });
});

内容的提问来源于stack exchange，提问作者Pedro Mora