Blazor交互式服务器强制WebSocket时出现400错误求助

问题背景 #

为适配无粘性会话的负载均衡环境，需强制Blazor Interactive Server仅使用WebSocket。本地运行正常，但在无负载均衡的测试环境中，连接wss://<Page>/<Subdirectory>/<BlazorHomePage>/_blazor时返回400 Bad Request，浏览器控制台提示SignalR连接相关错误。现有配置代码如下：

Program.cs 原配置 #

app.UseHttpsRedirection();

app.UseStaticFiles();
app.UseAntiforgery();

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

app.MapBlazorHub(e =>
{
    e.Transports = Microsoft.AspNetCore.Http.Connections.HttpTransportType.WebSockets;
}).WithOrder(-1);

app.Run();

App.razor 原配置 #

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="@BaseUrl" />
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="app.css" />
    <link rel="stylesheet" href="BaseBlazorApp.styles.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <HeadOutlet @rendermode="InteractiveServer" />
</head>

<body>
    <Routes @rendermode="InteractiveServer" />
    <script src="_framework/blazor.web.js" autostart="false"></script>
    <script>
        Blazor.start({
            circuit: {
                configureSignalR: function (builder) {
                    builder.withUrl("_blazor", {
                        skipNegotiation: true,
                        transport: 1
                    });
                }
            }
        })
    </script>
</body>

排查与修复步骤 #

1. 调整Blazor Hub路由配置顺序 #

MapBlazorHub的WithOrder(-1)会导致路由匹配优先级异常，应将Hub配置放在Razor组件映射之前，且无需手动指定Order：

app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseAntiforgery();

// 先配置Blazor Hub，确保路由优先匹配
app.MapBlazorHub(options =>
{
    options.Transports = Microsoft.AspNetCore.Http.Connections.HttpTransportType.WebSockets;
});

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

app.Run();

2. 修正客户端Transport枚举值 #

硬编码数字transport:1易出错，改用SignalR官方枚举常量，并确保依赖的SignalR脚本加载正常：

<script src="_framework/blazor.web.js" autostart="false"></script>
<!-- 若环境未自动引入SignalR，手动添加 -->
<script src="_framework/signalr.js"></script>
<script>
    Blazor.start({
        circuit: {
            configureSignalR: function (builder) {
                builder.withUrl("_blazor", {
                    skipNegotiation: true,
                    transport: signalR.HttpTransportType.WebSockets
                });
            }
        }
    })
</script>

3. 验证测试环境WebSocket支持 #

• IIS环境：需在服务器角色中启用「WebSocket协议」功能
• Kestrel环境：确认未在配置中禁用WebSocket（默认启用）
• SSL证书：测试环境需使用有效SSL证书，WSS连接依赖合法证书，证书不匹配/过期会触发400错误

4. 校验Base路径与Hub路由匹配 #

通过浏览器开发者工具查看实际请求URL，确保_blazor路径与服务器Hub路由一致。若base href为/Subdirectory/，相对路径_blazor会解析为/Subdirectory/_blazor，若解析错误，可直接指定绝对路径：

builder.withUrl("/<Subdirectory>/<BlazorHomePage>/_blazor", {
    skipNegotiation: true,
    transport: signalR.HttpTransportType.WebSockets
});

5. 确认Antiforgery令牌有效性 #

Blazor Server依赖Antiforgery令牌验证，检查浏览器网络请求中是否包含__RequestVerificationToken请求头或Cookie。若缺失，确保UseAntiforgery()配置在UseStaticFiles()之后、路由配置之前（当前配置已符合，可忽略此步）

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