Blazor JavaScript互调用异常：.NET Aspire项目API连接问题排查

针对你遇到的System.InvalidOperationException异常——即使已设置InteractiveServerRenderMode(prerender: false)仍报错，可按以下步骤排查解决：

1. 检查父级/布局组件的渲染模式 #

登录组件的渲染模式可能被父布局（如MainLayout.razor）的静态渲染覆盖。确保布局组件也启用交互式渲染：

@rendermode InteractiveServerRenderMode(prerender: false)
@inherits LayoutComponentBase

<!-- 布局内容 -->

或者在Program.cs中全局指定交互式渲染模式，避免局部设置被全局规则覆盖：

builder.Services.AddRazorComponents()
    .AddInteractiveServerRenderMode(options => options.DefaultPrerender = false);

2. 修正AuthenticationService的JS调用时机 #

如果AuthenticationService在构造函数或**组件初始化阶段（如OnInitializedAsync）**直接调用IJSRuntime，会因组件未完成交互式初始化触发错误。需将依赖JS的逻辑延迟到OnAfterRenderAsync执行（该方法能保证JS运行时已就绪）：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        // 在此处调用AuthenticationService中依赖JS的逻辑
        await _authenticationService.InitializeAuthStateAsync();
    }
    await base.OnAfterRenderAsync(firstRender);
}

同时检查AuthenticationService内部，避免在构造函数中执行JS互操作，将相关逻辑封装为异步方法，由组件在合适时机触发。

3. 确认登录页面的渲染模式配置 #

检查登录组件的@rendermode是否正确应用，避免拼写错误或参数设置失误：

@page "/login"
@rendermode InteractiveServerRenderMode(prerender: false)

<!-- 登录组件内容 -->

若使用路由约定指定渲染模式，确保Program.cs中未对该路由设置冲突的预渲染规则：

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode()
    .AddAdditionalAssemblies(typeof(Login).Assembly);

4. 排查.NET Aspire配置干扰 #

检查Aspire AppHost项目中对Blazor服务的配置，确保未通过环境变量或appsettings.json强制启用预渲染（比如无Blazor:Prerender=true这类配置项）。

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