如何在连接SignalR前调用Blazor Server的API获取主机名？

场景与需求 #

我有一个Blazor Server应用，HTTP请求需要经过门户，但该门户对WebSocket传输的SignalR流量支持不佳，因此无法使用与HTTP相同的Base URL，必须绕过门户直接建立SignalR连接。核心需求是：在浏览器端启动Blazor SignalR连接之前，调用API获取物理主机名，并用它来初始化SignalR的WebSocket地址。

已实现的API接口 #

后端已编写获取主机名的API：

[Route("api/[controller]")]
[ApiController]
public class HostInfoController : ControllerBase
{
    [HttpGet]
    public string Get()
    {
        return Environment.MachineName;
    }
}

现有JavaScript代码框架 #

目前的前端JS代码框架如下，需要补充API调用逻辑：

<script>
    (function start() {
        var hostname = // 调用/api/hostinfo (示例: axios.get(/api/hostinfo))

        var signalRUrl = 'ws://' + hostname + ':6400/_blazor'; 

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

我知道可以通过axios实现该API调用，但想了解Blazor API是否提供了内置方法来完成此操作。

解决方案 #

1. 使用浏览器原生fetch（无需第三方库，最贴合Blazor生态） #

Blazor内部依赖浏览器的fetch API处理HTTP请求，因此可以直接用原生fetch调用API，不需要额外引入axios。修改后的代码如下：

<script>
    (async function start() {
        // 调用API获取主机名
        const response = await fetch('/api/hostinfo');
        const hostname = await response.text();

        // 拼接SignalR WebSocket地址并启动Blazor
        const signalRUrl = `ws://${hostname}:6400/_blazor`;
        Blazor.start({
            configureSignalR: builder => builder.withUrl(signalRUrl)
        });
    })();
</script>

说明：这里用async/await处理异步请求，确保拿到主机名后再启动Blazor，避免因异步时序问题导致地址拼接失败。

2. 服务器端注入主机名（更高效，避免前端额外请求） #

如果不想在前端发起API请求，可以在服务器端直接获取主机名，然后注入到页面的全局变量中，前端直接使用即可：
在_Host.cshtml中添加全局变量：

<script>
    window.blazorHostName = '@Environment.MachineName';
</script>

然后修改启动脚本：

<script>
    (function start() {
        const hostname = window.blazorHostName;
        const signalRUrl = `ws://${hostname}:6400/_blazor`;

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

这种方式省去了前端的API请求，性能更优，也更简洁。

关于Blazor内置API的说明 #

Blazor并没有专门提供用于前端JavaScript调用API的内置方法。在Blazor启动前，.NET运行时还未初始化，此时只能使用浏览器原生API或第三方库。原生fetch是最推荐的选择，因为它是Blazor内部HTTP请求的依赖，无需额外引入资源。

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