在.NET 8自动项目中Blazor客户端调用Server API报错求助

问题根源 #

使用@rendermode InteractiveAuto时，组件会优先在服务器端完成初始渲染，但服务器端的服务容器中并未注册HttpClient服务——你仅在客户端（WebAssembly）的Program.cs中注册了HttpClient，这导致服务器端初始化组件时找不到对应服务，抛出注入失败的异常。

解决方案 #

方案1：切换渲染模式为纯客户端模式 #

如果不需要服务器端预渲染，直接将组件的渲染模式改为InteractiveWebAssembly：

@page "/lotto"
@using System.Net.Http
@inject HttpClient Http
@rendermode InteractiveWebAssembly

<h3>Lotto</h3>

@code {
    List<List<int>>? combinations;

    protected override async Task OnInitializedAsync()
    {
        combinations = await Http.GetFromJsonAsync<List<List<int>>>("api/Lotto");
    }
}

这样组件只会在客户端运行，客户端注册的HttpClient服务可以正常注入。

方案2：在服务器端注册HttpClient #

若需要保留InteractiveAuto的服务器端预渲染能力，需在服务器项目的Program.cs中添加HttpClient的注册：

// 服务器项目的Program.cs
var builder = WebApplication.CreateBuilder(args);

// 添加Razor组件服务
builder.Services.AddRazorComponents()
    .AddInteractiveWebAssemblyComponents();

// 注册HttpClient，配置BaseAddress指向服务器API地址
builder.Services.AddScoped(sp => 
    new HttpClient { BaseAddress = new Uri($"{builder.Environment.WebRootPath}/") });

var app = builder.Build();

// 配置中间件
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseAntiforgery();

app.MapRazorComponents<App>()
    .AddInteractiveWebAssemblyRenderMode()
    .AddAdditionalAssemblies(typeof(LottoPicker.Client._Imports).Assembly);

app.Run();

注意：需根据实际API地址调整BaseAddress，确保服务器端HttpClient能正常访问接口。

方案3：在组件中规避服务器端渲染场景 #

通过OperatingSystem.IsBrowser()判断当前运行环境，仅在客户端时调用HttpClient：

@page "/lotto"
@using System.Net.Http
@inject HttpClient Http
@rendermode InteractiveAuto

<h3>Lotto</h3>

@if (combinations != null)
{
    <!-- 渲染彩票组合数据 -->
    @foreach (var combo in combinations)
    {
        <p>@string.Join(", ", combo)</p>
    }
}

@code {
    List<List<int>>? combinations;

    protected override async Task OnInitializedAsync()
    {
        // 仅在客户端环境下调用API
        if (OperatingSystem.IsBrowser())
        {
            combinations = await Http.GetFromJsonAsync<List<List<int>>>("api/Lotto");
        }
    }
}

这种方式既保留了InteractiveAuto的渲染模式，又避免了服务器端初始化时的HttpClient依赖问题。

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