Blazor中使用HttpClient调用API时Cookie认证失效问题求助

问题根源 #

你遇到的核心问题是：Blazor Interactive Server模式下，组件代码运行在服务器端，手动创建的HttpClient及其CookieContainer是服务器内存中的对象，和浏览器的Cookie存储完全隔离。调用Login接口后，认证Cookie仅存在服务器端容器中，浏览器无法接收和存储，因此开发者工具看不到Cookie，后续认证状态也不会更新。而表单提交是浏览器直接发起的请求，服务器返回的Set-Cookie头会被浏览器自动处理，Cookie正常存储，所以认证有效。

解决方案 #

方案一：用JS互操作让浏览器发起登录请求（推荐） #

通过浏览器的Fetch API发送请求，让浏览器自动处理Cookie的接收和存储，这是符合Web认证流程的标准做法。

1. 在wwwroot下创建auth.js文件：

export async function login(url) {
    const response = await fetch(url, {
        method: 'POST',
        credentials: 'include' // 关键：携带并保存Cookie
    });
    return response.ok;
}

2. 在Blazor组件中调用该JS方法：

@inject IJSRuntime JS
@inject NavigationManager NavManager
@inject AuthenticationStateProvider AuthState

@implements IAsyncDisposable

private IJSObjectReference? _authModule;

protected override async Task OnInitializedAsync()
{
    _authModule = await JS.InvokeAsync<IJSObjectReference>("import", "./auth.js");
}

private async Task Login()
{
    var loginUrl = $"{NavManager.BaseUri}Api/Login";
    var loginSuccess = await _authModule!.InvokeAsync<bool>("login", loginUrl);
    
    if (loginSuccess)
    {
        // 通知认证状态更新，让Blazor重新获取用户信息
        if (AuthState is ServerAuthenticationStateProvider serverAuthProvider)
        {
            serverAuthProvider.NotifyAuthenticationStateChanged(
                AuthState.GetAuthenticationStateAsync()
            );
        }
        
        // 验证更新后的状态
        var authState = await AuthState.GetAuthenticationStateAsync();
        var userClaims = authState.User.Claims;
    }
}

public async ValueTask DisposeAsync()
{
    if (_authModule != null)
    {
        await _authModule.DisposeAsync();
    }
}

方案二：直接操作服务器端HttpContext登录（适合简单场景） #

如果不需要通过API接口登录，可直接在Blazor组件中注入IHttpContextAccessor，调用认证逻辑：

1. 在Program.cs中注册服务：

builder.Services.AddHttpContextAccessor();

2. 组件中实现登录：

@inject IHttpContextAccessor HttpContextAccessor
@inject AuthenticationStateProvider AuthState

private async Task Login()
{
    var httpContext = HttpContextAccessor.HttpContext;
    if (httpContext == null) return;
    
    var userClaims = new[] { new Claim(ClaimTypes.NameIdentifier, Guid.NewGuid().ToString()) };
    var identity = new ClaimsIdentity(userClaims, CookieAuthenticationDefaults.AuthenticationScheme);
    var principal = new ClaimsPrincipal(identity);
    
    var props = new AuthenticationProperties
    {
        ExpiresUtc = DateTime.UtcNow.AddMinutes(30),
        AllowRefresh = true,
        IsPersistent = true
    };

    await httpContext.SignInAsync(CookieAuthenticationDefaults.AuthenticationScheme, principal, props);
    
    // 通知认证状态更新
    if (AuthState is ServerAuthenticationStateProvider serverAuthProvider)
    {
        serverAuthProvider.NotifyAuthenticationStateChanged(
            AuthState.GetAuthenticationStateAsync()
        );
    }
    
    var authState = await AuthState.GetAuthenticationStateAsync();
    var userClaims = authState.User.Claims;
}

额外配置检查 #

• 你设置了options.Cookie.SecurePolicy = CookieSecurePolicy.Always;，需确保开发环境也启用HTTPS（在launchSettings.json中开启），否则浏览器会拒绝存储Cookie。
• 移除Program.cs中多余的路由配置：app.MapControllerRoute("Login", "Api/Login");，因为控制器的[Route]特性已经定义了路由，app.MapControllers()足够处理。

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