如何配置Blazor为HTTP与WebSocket连接设置不同的基础URL？

我有一个运行在企业内网的Blazor Server应用，用户通过公司标准Web门户访问——这个门户提供友好URL、SSO、故障转移等核心功能。但门户对WebSocket消息的payload限制为64KB，当页面包含大量数据（比如大型网格）时，服务器会发送几百KB甚至几MB的消息，直接导致SignalR通信中断。

直接连接服务器时一切正常，但会丢失SSO功能，严重影响用户体验。

我的核心需求是：继续通过门户的友好CNAME走HTTP连接，同时让Blazor用真实主机名建立WebSocket连接，示例如下：

• HTTP请求地址：http://myportal/myapp/home
• WebSocket连接地址：ws://server1234:6400/_blazor

我之前见过修改路径的JS代码，但不知道如何映射完整的基础URL：

<script>
    (function start() {
        Blazor.start({
            configureSignalR: builder => builder.withUrl("/_barfoo")
        });
    })()
</script>

已基于现有回答实现静态指定WebSocket地址的方案，具体代码如下：

浏览器端（_Layout.cshtml） #

<script>
    (function start() {
        var signalUrl = 'http://server1234:6400/_blazor'
        Blazor.start({
            configureSignalR: builder => builder.withUrl(signalUrl)
        });
    })()
</script>

服务器端（Program.cs） #

需配置CORS允许跨域WebSocket连接，注意中间件顺序：

builder.Services.AddCors(options =>
{
    options.AddPolicy("SigRPolicy", builder =>
        builder.WithOrigin("http://server1234")
               .AllowAnyMethod()
               .AllowAnyHeader())
               .SetIsOriginAllowed(_ => true);
});

// 中间件顺序要求：在UseRouting之后、UseAuthentication之前
app.UseRouting();
app.UseCors("SigRPolicy");
app.UseAuthentication();
// 其他业务中间件...

要实现动态获取真实服务器的主机名和端口，可通过后端API接口返回地址信息，再在前端初始化Blazor时使用：

步骤1：后端添加获取WebSocket地址的API #

在Blazor Server项目中添加API端点，从配置/内部服务获取真实服务器地址：

// 示例：在Program.cs中添加最小API
app.MapGet("/api/signalr/endpoint", () =>
{
    // 可从配置中心、环境变量或内部服务动态获取地址
    var realServerAddress = "http://server1234:6400";
    return Results.Ok(new { SignalRUrl = $"{realServerAddress}/_blazor" });
});

步骤2：前端动态获取地址并初始化Blazor #

修改_Layout.cshtml中的脚本，先调用API获取地址，再启动Blazor：

<script>
    async function start() {
        try {
            // 调用后端API获取动态地址
            const response = await fetch('/api/signalr/endpoint');
            const data = await response.json();
            const signalUrl = data.SignalRUrl;

            // 初始化Blazor并指定WebSocket地址
            Blazor.start({
                configureSignalR: builder => builder.withUrl(signalUrl)
            });
        } catch (error) {
            console.error('获取SignalR端点失败:', error);
            // 可选：失败时回退到默认启动方式
            Blazor.start();
        }
    }
    start();
</script>

步骤3：更新CORS配置（可选） #

如果真实服务器地址动态变化，内网环境下可放宽CORS策略：

builder.Services.AddCors(options =>
{
    options.AddPolicy("SigRPolicy", builder =>
        builder.AllowAnyOrigin()
               .AllowAnyMethod()
               .AllowAnyHeader());
});

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