.NET API与Blazor Server间Cookie传递失败：浏览器未存储Cookie

核心原因 #

Blazor Server中直接使用的HttpClient运行在服务器端，它的Cookie容器和浏览器的Cookie池完全隔离。API响应中的Set-Cookie会被服务器端的HttpClient接收，但不会自动同步到用户的浏览器中——这就是Postman能正常获取Cookie，而浏览器看不到的根本原因。

解决方案 #

方案一：通过JavaScript调用API（推荐，支持HttpOnly Cookie） #

利用浏览器原生的fetch发起请求，浏览器会自动处理Set-Cookie并保存到本地Cookie池。在Blazor中通过IJSRuntime调用JavaScript实现：

1. 在Blazor项目的wwwroot/index.html（或_Host.cshtml）中添加JS函数：

window.fetchApiAndSetCookie = async function(apiUrl) {
    const response = await fetch(apiUrl, {
        method: 'GET',
        credentials: 'include' // 必须配置，允许跨域携带凭证（Cookie）
    });
    return await response.text();
};

2. 在Blazor组件中注入IJSRuntime并调用该函数：

@inject IJSRuntime JSRuntime

<button @onclick="CallApi">调用API并设置Cookie</button>

@code {
    private async Task CallApi()
    {
        var result = await JSRuntime.InvokeAsync<string>(
            "fetchApiAndSetCookie", 
            "https://localhost:44367/Test/TestCookie/test-cookie"
        );
        // 按需处理API返回结果
    }
}

方案二：服务器端提取Cookie后手动同步（仅支持非HttpOnly Cookie） #

由于你的SimpleTestCookie设置了HttpOnly=true，浏览器JS无法读取或修改这类Cookie，因此该方案不适用。如果是普通非HttpOnly Cookie，可参考以下步骤：

1. 服务器端调用API后提取Set-Cookie头，再通过JS同步到浏览器：

var response = await httpClient.GetAsync("https://localhost:44367/Test/TestCookie/test-cookie");
if (response.Headers.TryGetValues("Set-Cookie", out var setCookies))
{
    foreach (var cookie in setCookies)
    {
        await JSRuntime.InvokeVoidAsync("document.cookie", cookie);
    }
}

关键配置检查 #

确认API的CORS和Cookie配置符合跨域要求：

• CORS策略已启用AllowCredentials()，且WithOrigins指定了正确的Blazor Server地址（https://localhost:44319）
• Cookie的SameSite=None、Secure=true、HttpOnly=true配置适配跨域场景（必须在HTTPS环境下运行）

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