Blazor Server中POST与GET设置Cookie的差异及问题排查

核心原因 #

你在Blazor组件中注入的HttpClient是服务器端的HTTP客户端——它发起的POST请求是从服务器内部向自身控制器发送的，响应中的Set-Cookie头只会留在服务器端的HttpClient实例中，不会被浏览器接收和存储，自然前端不会生成认证Cookie。

而NavigationManager.NavigateTo是触发浏览器发起GET请求，表单提交是浏览器直接发起POST请求，这两种场景下浏览器会自动处理响应中的Set-Cookie头，将Cookie存在本地，所以能正常完成认证。

解决方案 #

方案1：用JSInterop发起浏览器端POST请求 #

通过JavaScript的fetch API发起请求，让浏览器处理Cookie，同时保留接收JSON响应的能力：

1. 在组件中注入IJSRuntime和NavigationManager：

[Inject]
private IJSRuntime JSRuntime { get; set; }

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

2. 修改登录方法：

private async Task HandleSubmitPost()
{
    try
    {
        var response = await JSRuntime.InvokeAsync<object>("fetch", "/api/authp", new
        {
            method = "POST",
            headers = new { "Content-Type" = "application/json" },
            body = System.Text.Json.JsonSerializer.Serialize(loginModel),
            credentials = "include" // 关键：允许浏览器发送/接收Cookie
        });

        var isSuccess = await JSRuntime.InvokeAsync<bool>("checkResponseOk", response);
        if (isSuccess)
        {
            var result = await JSRuntime.InvokeAsync<AuthenticationResult>("parseResponseJson", response);
            Debug.Print(result.Message);
            // 刷新页面更新Blazor的认证状态
            NavigationManager.NavigateTo("/", true);
        }
        else
        {
            var errorResult = await JSRuntime.InvokeAsync<AuthenticationErrorResult>("parseResponseJson", response);
            Debug.Print(errorResult.Message);
            logindone = false;
        }
    }
    catch (Exception ex)
    {
        Debug.Print(ex.Message);
        logindone = false;
    }
}

3. 在wwwroot/index.html中添加辅助JS函数：

async function checkResponseOk(response) {
    return response.ok;
}

async function parseResponseJson(response) {
    return await response.json();
}

方案2：用AJAX表单提交（阻止默认刷新） #

保留表单结构，但通过JS阻止默认刷新，用fetch处理请求：

1. 组件中的表单：

<form @onsubmit="HandleFormSubmit">
    <input type="text" @bind="@loginModel.U" placeholder="用户名" />
    <input type="password" @bind="@loginModel.P" placeholder="密码" />
    <button type="submit">登录</button>
</form>

2. 组件中的处理方法：

private async Task HandleFormSubmit(EventArgs e)
{
    e.PreventDefault(); // 阻止表单默认刷新行为
    await JSRuntime.InvokeVoidAsync("submitLogin", loginModel);
}

3. wwwroot/index.html中的JS：

async function submitLogin(model) {
    const res = await fetch('/api/authp', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(model),
        credentials: 'include'
    });

    const data = await res.json();
    if (res.ok) {
        console.log(data.Message);
        // 刷新页面更新认证状态
        window.location.reload();
    } else {
        console.error(data.Message);
    }
}

注意事项 #

• 登录成功后必须刷新页面（或触发Blazor的认证状态更新），因为Blazor Server的用户认证状态是在页面初始化时建立的，不刷新的话组件不会感知到新的Cookie。
• 不要在Blazor组件中直接操作HttpContext——Blazor组件运行在SignalR连接上下文，此时HTTP响应已经发送给浏览器，无法修改响应头（包括Set-Cookie），这就是你遇到Headers are read-only错误的原因。

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