预渲染场景下HttpClient正确使用及BaseUri空值问题咨询

一、先解决HttpClient服务未注册问题 #

第二个错误的核心是服务注册缺失，需确保服务端和客户端的HttpClient配置覆盖预渲染场景：

1. Server端Program.cs核心配置 #

在.NET 9 Blazor Web App（含预渲染）中，优先注册类型化HttpClient（推荐）或命名HttpClient，同时明确配置绝对BaseAddress：

var builder = WebApplication.CreateBuilder(args);

// 注册控制器
builder.Services.AddControllers();

// 注册类型化HttpClient，集中配置BaseAddress
builder.Services.AddHttpClient<ThemeApiClient>(client =>
{
    // 优先从配置文件读取， fallback到服务器根地址拼接api路径
    client.BaseAddress = new Uri(builder.Configuration["ApiBaseUrl"] ?? $"{builder.HostEnvironment.BaseAddress}api/");
});

// 若需直接注入HttpClient，注册命名实例
builder.Services.AddHttpClient("ApiClient", client =>
{
    client.BaseAddress = new Uri(builder.Configuration["ApiBaseUrl"] ?? $"{builder.HostEnvironment.BaseAddress}api/");
});

var app = builder.Build();

app.MapControllers();

// 启用对应渲染模式（含预渲染）
app.MapRazorComponents<App>()
   .AddInteractiveServerRenderMode()
   .AddStaticRenderMode();

app.Run();

2. 组件避免直接注入原始HttpClient #

不要在组件中直接注入HttpClient，改用类型化服务封装API调用，既避免BaseUri混乱，也符合关注点分离：

// 封装API调用的类型化服务
public class ThemeApiClient
{
    private readonly HttpClient _http;

    public ThemeApiClient(HttpClient http) => _http = http;

    public async Task<List<Theme>> GetThemesAsync()
    {
        // 这里直接用相对路径，依赖已配置的BaseAddress
        return await _http.GetFromJsonAsync<List<Theme>>("Theme") ?? [];
    }
}

组件中注入该服务即可：

@inject ThemeApiClient ThemeApi
@code {
    private List<Theme> themes = [];

    protected override async Task OnInitializedAsync()
    {
        themes = await ThemeApi.GetThemesAsync();
    }
}

二、解决预渲染时BaseUri为空的核心问题 #

预渲染阶段组件在服务器端执行，无客户端请求上下文，需针对性处理：

1. 强制使用绝对BaseAddress #

配置HttpClient时必须传入绝对URI，不能用相对路径。可通过配置文件（如appsettings.json）存储ApiBaseUrl，或用服务器环境变量动态获取根地址。

2. 适配预渲染时的HttpContext缺失 #

若使用交互式预渲染，可通过IHttpContextAccessor动态获取当前请求地址，但需处理预渲染时HttpContext为空的情况：

builder.Services.AddHttpContextAccessor();

builder.Services.AddHttpClient("ApiClient", (sp, client) =>
{
    var httpContext = sp.GetService<IHttpContextAccessor>()?.HttpContext;
    if (httpContext != null)
    {
        var request = httpContext.Request;
        client.BaseAddress = new Uri($"{request.Scheme}://{request.Host}{request.PathBase}/api/");
    }
    else
    {
        // 预渲染时用配置地址或服务器根地址
        client.BaseAddress = new Uri(builder.Configuration["ApiBaseUrl"] ?? $"{builder.HostEnvironment.BaseAddress}api/");
    }
});

3. 可选：跳过预渲染阶段的API调用 #

若部分数据无需预渲染，可判断渲染模式跳过调用：

@inject IComponentRenderMode RenderMode
@inject ThemeApiClient ThemeApi
@code {
    private List<Theme> themes = [];

    protected override async Task OnInitializedAsync()
    {
        // 仅在交互式渲染时调用API
        if (RenderMode is InteractiveServerRenderMode or InteractiveWebAssemblyRenderMode)
        {
            themes = await ThemeApi.GetThemesAsync();
        }
    }
}

三、组件和服务中访问BaseUri的最优方案 #

1. 服务层集中管理：通过类型化/命名HttpClient在Program.cs中统一配置BaseAddress，组件和服务直接使用已配置的HttpClient，无需单独读取BaseUri。
2. 注入IConfiguration读取：若需直接获取BaseUri，注入IConfiguration读取配置项：

@inject IConfiguration Config
@code {
    private string apiBaseUrl;

    protected override void OnInitialized()
    {
        apiBaseUrl = Config["ApiBaseUrl"] ?? $"{NavigationManager.BaseUri}api/";
    }
}

3. 客户端用NavigationManager：在WebAssembly交互式模式下，可通过NavigationManager.BaseUri获取客户端Base地址，但需结合渲染模式判断，避免预渲染时的不准确值。

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