.NET 8独立Blazor WASM应用无法保存HTTP请求Cookie排查

独立Blazor WebAssembly应用中，默认的HttpClient封装浏览器Fetch API时未启用凭据（credentials）传递，导致跨域请求时，浏览器不会将API返回的Set-Cookie写入document.cookie，后续请求也不会自动携带Cookie。而Blazor Web App（WASM渲染模式）因属于托管架构，请求默认走同域代理，无需显式配置即可自动处理Cookie。

核心原因 #

独立WASM的HttpClient默认基于BrowserHttpMessageHandler，但默认未设置AllowCredentials = true，导致底层Fetch请求使用credentials: omit（不携带/存储凭据）。即使浏览器Network面板能看到Set-Cookie头，也不会写入document.cookie，后续请求自然无法带上Cookie。

解决办法 #

1. 配置HttpClient启用凭据传递

注册HttpClient时，显式配置BrowserHttpMessageHandler的AllowCredentials属性，让底层Fetch请求使用credentials: include：

builder.Services.AddHttpClient("API", client =>
    client.BaseAddress = new Uri("https://localhost:7211"))
.ConfigurePrimaryHttpMessageHandler(() =>
{
    return new BrowserHttpMessageHandler
    {
        AllowCredentials = true
    };
});

此配置会让浏览器自动处理Set-Cookie，并在后续同域请求中携带Cookie。

2. 验证Cookie配置的正确性

虽然你已设置SameSite=None、Secure=true、HttpOnly=false，仍需确认：

• Cookie的Domain属性是否匹配API域名（跨域场景下可留空，让浏览器自动识别）；
• 确保所有请求均为HTTPS（你已满足）；
• SameSite=None必须搭配Secure=true，否则浏览器会拒绝存储Cookie。

3. 替代方案：直接使用JS Interop调用Fetch

若上述配置不生效，可直接封装Fetch请求并显式设置credentials: include：

wwwroot/js/cookieHelper.js

window.setCookie = async function () {
    const response = await fetch('https://localhost:7211/api/Cookie/SetCookie', {
        method: 'GET',
        credentials: 'include'
    });
    return response.ok;
};

window.checkCookie = async function () {
    const response = await fetch('https://localhost:7211/api/Cookie/CheckCookie', {
        method: 'GET',
        credentials: 'include'
    });
    return response.ok;
};

CookieService.cs

public class CookieService
{
    private readonly IJSRuntime _jsRuntime;

    public CookieService(IJSRuntime jsRuntime)
    {
        _jsRuntime = jsRuntime;
    }

    public async Task<bool> SetCookie()
    {
        return await _jsRuntime.InvokeAsync<bool>("window.setCookie");
    }

    public async Task<bool> CheckCookie()
    {
        return await _jsRuntime.InvokeAsync<bool>("window.checkCookie");
    }
}

为什么Blazor Web App（WASM模式）能正常工作？ #

Blazor Web App的WASM渲染模式属于托管架构，前端与API共享同一域名（通过反向代理），此时请求为同域请求，Fetch默认使用credentials: same-origin，浏览器会自动处理Cookie，无需额外配置。而独立WASM是完全分离的跨域应用，必须显式启用凭据传递。

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