Blazor中OnInitializedAsync首次调用时HttpClient基地址为空的解决方法

问题根源 #

Blazor自动渲染模式会先在服务器端执行组件的预渲染流程。你的服务器项目仅注册了AddHttpClient()但未设置BaseAddress，而客户端的HttpClient配置仅在WebAssembly环境生效：

• OnInitializedAsync在服务器预渲染阶段执行，此时注入的是服务器端未配置BaseAddress的HttpClient，因此抛出异常；
• OnAfterRenderAsync在客户端浏览器渲染完成后执行，此时使用的是客户端配置的带BaseAddress的HttpClient，所以能正常工作。

解决方案 #

方案1：跳过预渲染阶段的HttpClient调用 #

通过判断组件是否处于预渲染状态，避免在服务器端执行HttpClient请求：

1. 先在服务器和客户端项目的Program.cs中注册IHttpContextAccessor服务：

builder.Services.AddHttpContextAccessor();

2. 在组件中注入并使用该服务判断状态：

[Inject]
private IHttpContextAccessor HttpContextAccessor { get; set; }

[Inject]
private HttpClient HttpClient { get; set; }

protected override async Task OnInitializedAsync()
{
    // 服务器预渲染时跳过HttpClient调用
    if (HttpContextAccessor.HttpContext == null)
    {
        return;
    }

    // 正常执行HttpClient请求
    var data = await HttpClient.GetFromJsonAsync<YourDataType>("api/your-endpoint");
    // 处理数据逻辑
}

方案2：统一配置两端的HttpClient BaseAddress #

让服务器端和客户端的HttpClient都拥有正确的BaseAddress，确保预渲染阶段也能正常使用：

1. 服务器项目Program.cs中注册HttpClient时指定BaseAddress：

builder.Services.AddHttpClient(client =>
{
    client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress);
});

2. 客户端项目Program.cs保持原有配置（或与服务器端一致）：

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

3. 组件中直接注入HttpClient，OnInitializedAsync即可正常使用：

[Inject]
private HttpClient HttpClient { get; set; }

protected override async Task OnInitializedAsync()
{
    var data = await HttpClient.GetFromJsonAsync<YourDataType>("api/your-endpoint");
    // 处理数据逻辑
}

方案3：使用命名HttpClient（更灵活的多场景适配） #

通过IHttpClientFactory创建命名HttpClient，统一两端配置：

1. 服务器项目Program.cs：

builder.Services.AddHttpClient("ApiClient", client =>
{
    client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress);
});

2. 客户端项目Program.cs：

builder.Services.AddHttpClient("ApiClient", client =>
{
    client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress);
});

3. 组件中注入IHttpClientFactory并创建客户端：

[Inject]
private IHttpClientFactory HttpClientFactory { get; set; }

private HttpClient _apiClient;

protected override void OnInitialized()
{
    _apiClient = HttpClientFactory.CreateClient("ApiClient");
}

protected override async Task OnInitializedAsync()
{
    var data = await _apiClient.GetFromJsonAsync<YourDataType>("api/your-endpoint");
    // 处理数据逻辑
}

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