部署Blazor WASM应用后无法访问HangFire仪表盘的问题

问题分析 #

部署后通过NavigationManager.NavigateTo带forceLoad: true跳转HangFire仪表盘时出现404，但直接复制URL在隐私窗口能正常访问，核心原因是Blazor的路由系统在部署环境下仍可能拦截该请求，没有正确转发到后端的HangFire端点，即使设置了forceLoad，也可能因部署服务器的静态文件配置或Blazor的 fallback 规则导致请求被路由到Blazor的NotFound页面。

解决方案 #

1. 调整后端路由优先级，排除HangFire路径 #

确保HangFire端点配置在Blazor fallback路由之前，让后端优先处理/hangfire请求，同时在fallback规则中排除该路径：

app.UseEndpoints(endpoints =>
{
    // 先配置HangFire端点
    endpoints.MapHangfireDashboard(
        pattern: "/hangfire",
        options: new() { DashboardTitle = "Job Dashboard", Authorization = new[] { new HangFireAuthorizationFilter() } });
    
    // 配置Blazor fallback并排除/hangfire路径
    endpoints.MapFallbackToFile("index.html")
             .Add(endpointFilter => async (context, next) =>
             {
                 var path = context.HttpContext.Request.Path;
                 if (path.StartsWithSegments("/hangfire"))
                 {
                     // 跳过Blazor fallback，让请求直接由HangFire端点处理
                     return Results.StatusCode(404);
                 }
                 return await next(context);
             });
});

2. 改用JavaScript跳转绕过Blazor路由 #

直接通过浏览器原生跳转方式，绕过Blazor的路由拦截，确保请求直接发送到后端：

using Microsoft.JSInterop;

// 在组件中注入IJSRuntime和NavigationManager
private readonly IJSRuntime _jsRuntime;
private readonly NavigationManager _navigationManager;

public YourComponent(IJSRuntime jsRuntime, NavigationManager navigationManager)
{
    _jsRuntime = jsRuntime;
    _navigationManager = navigationManager;
}

// 替换原NavigateTo逻辑
var accessToken = await LocalStorageService.GetItemAsync<string>(StorageConstants.AUTH_TOKEN);
// 对token进行URL编码，避免特殊字符干扰
var encodedToken = Uri.EscapeDataString(accessToken);
var hangfireUrl = $"{_navigationManager.BaseUri}hangfire?token={encodedToken}";
await _jsRuntime.InvokeVoidAsync("window.location.href", hangfireUrl);

3. 修改部署服务器的URL重写规则 #

如果使用IIS部署，修改web.config中的重写规则，排除/hangfire路径：

<rewrite>
  <rules>
    <rule name="Blazor Routes" stopProcessing="true">
      <match url=".*" />
      <conditions logicalGrouping="MatchAll">
        <!-- 排除/hangfire及其子路径 -->
        <add input="{REQUEST_URI}" pattern="^/hangfire(/.*)?$" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
      </conditions>
      <action type="Rewrite" url="index.html" />
    </rule>
  </rules>
</rewrite>

若使用Azure App Service等托管平台，在平台路由配置中添加排除规则，确保/hangfire路径直接转发到后端API。

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