如何在保留Blazor全局授权的同时修复CSS样式失效问题？

问题根源 #

启用全局授权的FallbackPolicy后，所有未明确标记[AllowAnonymous]的HTTP请求都会被拦截，包括静态资源（CSS、JS、图片等）的请求。隐身模式下用户未登录，静态资源请求因未通过授权验证被拒绝，导致登录页样式失效；登录后用户已认证，请求被允许，样式恢复正常。

修复方法 #

只需为静态资源路径配置匿名访问权限，以下是几种可行的实现方式：

方法一：为单个静态资源目录配置匿名授权 #

在Program.cs的管道配置部分，为wwwroot下的核心静态资源目录（如css、js）单独添加匿名访问规则：

var builder = WebApplication.CreateBuilder(args);

// 保留原全局授权配置
builder.Services.AddAuthorization(options =>
{
    options.FallbackPolicy = options.DefaultPolicy;
});

// 添加其他必要服务
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();

var app = builder.Build();

// 配置静态文件中间件
app.UseStaticFiles();

// 为css目录开启匿名访问
app.Map("/css", app =>
{
    app.UseStaticFiles();
    app.RequireAuthorization(new Microsoft.AspNetCore.Authorization.AuthorizeAttribute { AllowAnonymous = true });
});

// 为js目录开启匿名访问
app.Map("/js", app =>
{
    app.UseStaticFiles();
    app.RequireAuthorization(new Microsoft.AspNetCore.Authorization.AuthorizeAttribute { AllowAnonymous = true });
});

// 保留后续管道配置
app.UseRouting();
app.UseAuthentication();
app.UseAuthorization();

app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

app.Run();

方法二：批量匹配静态资源路径配置匿名访问 #

如果有多个静态资源目录，可通过MapWhen批量匹配路径，统一配置匿名访问：

// 在app.UseAuthorization()之前添加
app.MapWhen(context => 
    context.Request.Path.StartsWithSegments("/css") ||
    context.Request.Path.StartsWithSegments("/js") ||
    context.Request.Path.StartsWithSegments("/images"), 
    staticApp =>
    {
        staticApp.UseStaticFiles();
        staticApp.RequireAuthorization(new Microsoft.AspNetCore.Authorization.AuthorizeAttribute { AllowAnonymous = true });
    });

方法三：简化配置（.NET 6+适用） #

直接为静态资源映射添加AllowAnonymous元数据，代码更简洁：

// 替换原有的app.UseStaticFiles();
app.MapStaticAssets().WithMetadata(new Microsoft.AspNetCore.Authorization.AllowAnonymousAttribute());

验证修复 #

重启应用后，在隐身模式下访问登录页，样式应正常加载；登录后所有页面功能和样式保持正常，同时全局授权的保护机制依然生效，未标记[AllowAnonymous]的页面仍需认证才能访问。

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