Blazor Server无法将API返回Token存入Cookie的问题求助

问题场景 #

在Blazor Server项目中，登录组件调用外部API获取Token后，尝试通过HttpContextAccessor将Token存入Cookie时，持续触发以下错误：

Error: System.InvalidOperationException: Headers are read-only, response has already started.
at Microsoft.AspNetCore.Server.Kestrel.Core.Internal.Http.HttpHeaders.ThrowHeadersReadOnlyException()
at Microsoft.AspNetCore.Server.Kestrel.Core.Internal.Http.HttpResponseHeaders.Microsoft.AspNetCore.Http.IHeaderDictionary.set_SetCookie(StringValues value)
at Microsoft.AspNetCore.Http.ResponseCookies.Append(String key, String value, CookieOptions options)
at FinUnsize.Pages.Account.Login.Login.SaveToken(String token) in C:\Users\Gui-Ribs\Desktop\FinUnsize_System-main\Pages\Account\Login\Login.razor:line 64
at FinUnsize.Pages.Account.Login.Login.<>c__DisplayClass9_0.b__0() in C:\Users\Gui-Ribs\Desktop\FinUnsize_System-main\Pages\Account\Login\Login.razor:line 92
at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContextDispatcher.InvokeAsync(Action workItem)
at FinUnsize.Pages.Account.Login.Login.Entry() in C:\Users\Gui-Ribs\Desktop\FinUnsize_System-main\Pages\Account\Login\Login.razor:line 92
at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

API连接与数据返回功能正常，核心问题是无法在组件中修改响应头设置Cookie。

原因分析 #

Blazor Server的组件渲染流程中，当用户触发登录操作时，组件已完成初始渲染，HTTP响应已经开始向客户端发送。此时通过HttpContextAccessor修改响应头（包括设置Cookie）属于非法操作，因为响应头一旦开始发送就无法再修改。

解决方案 #

方案1：通过JavaScript设置Cookie（推荐） #

利用IJSRuntime调用浏览器原生API设置Cookie，这是Blazor Server组件中操作Cookie的标准方式，不受服务器响应阶段限制。

修改Login.razor中的SaveToken方法和登录逻辑：

@code {
    private string login;
    private string password;
    private bool isLoading;
    private string btn;
    private string errorMessage;
    private string ACCESS_TOKEN = "accessToken";
    ElementReference loginInput;

    // 改用JS设置Cookie
    public async Task SaveToken(string token)
    {
        var expires = DateTime.Now.AddHours(1).ToString("R"); // 转换为浏览器兼容的RFC1123格式
        await JSRuntime.InvokeVoidAsync("document.cookie", 
            $"{ACCESS_TOKEN}={token}; path=/; expires={expires}; secure=true");
    }

    private async Task Entry()
    {
        isLoading = true;
        btn = "loading";

        var endpoint = "user/login";
        var response = await apiResponse.Login(endpoint, login, password);
        
        if (!response.Contains("erro"))
        {
            await SaveToken(response);
            NavigationManager.NavigateTo("/count");
        }
        else
        {
            errorMessage = "Login ou Senha estão incorretos";
            await loginInput.FocusAsync();
            btn = null;
        }

        isLoading = false;
    }
}

方案2：将登录逻辑移至服务器端管道 #

创建Razor Page或API控制器处理登录请求，在服务器端响应开始前设置Cookie，组件通过表单提交或API调用该端点：

1. 创建Login.cshtml.cs（Razor Page）：

public class LoginModel : PageModel
{
    private readonly ApiResponse _apiResponse;

    public LoginModel(ApiResponse apiResponse)
    {
        _apiResponse = apiResponse;
    }

    [BindProperty]
    public string Login { get; set; }
    [BindProperty]
    public string Password { get; set; }

    public async Task<IActionResult> OnPostAsync()
    {
        var endpoint = "user/login";
        var token = await _apiResponse.Login(endpoint, Login, Password);
        
        if (!token.Contains("erro"))
        {
            Response.Cookies.Append("accessToken", token, new CookieOptions
            {
                Path = "/",
                Expires = DateTime.Now.AddHours(1),
                Secure = true,
                HttpOnly = true // 可选：防止JS读取，提升安全性
            });
            return RedirectToPage("/Count");
        }
        
        ModelState.AddModelError(string.Empty, "Login ou Senha estão incorretos");
        return Page();
    }
}

2. 修改Login.razor的表单，直接提交到该Razor Page：

<form method="post" asp-page="/Login">
    <div>
        <input type="text" placeholder="LOGIN" class="cvc" name="Login" autofocus required>
        <input type="password" placeholder="Senha" class="titular" name="Password" required>
    </div>
    @if (!string.IsNullOrEmpty(errorMessage))
    {
        <p class="error-message">@errorMessage</p>
    }
    <div class="form-bottom">
        <button type="submit" class="@btn">EFETUAR O LOGIN</button>
        <p>Não possui uma conta? <a href="/user/company">Faça o Cadastro</a></p>
    </div>
</form>

关键说明 #

• Blazor Server中，用户交互触发的操作通常发生在响应已经发送之后，此时无法修改HTTP响应头。
• 使用JavaScript设置Cookie是客户端操作，不受服务器响应阶段限制，适合组件内的动态操作。
• 若需要设置HttpOnly等服务器端控制的Cookie属性，必须在服务器请求管道的早期阶段（如Razor Page、控制器）处理，确保响应头未开始发送。

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