使用JavaScript Fetch无法设置HttpOnly Cookie并回传至服务器求助

一、关于Chrome应用标签看不到HttpOnly Cookie的说明 #

HttpOnly Cookie的核心设计是禁止JavaScript访问，但Chrome的Application标签Cookie列表是会显示HttpOnly Cookie的（列表中会标注「HttpOnly」标识）。如果完全看不到，大概率是Cookie的属性设置存在问题，比如Domain/Path不匹配、Secure属性限制等导致Cookie未被浏览器存储。

二、服务器无法识别已认证用户的排查与修复 #

1. 移除前端无效请求头 #

Access-Control-Allow-Credentials是服务器响应头，前端设置这个请求头没有意义，反而可能引发不必要的问题，直接从请求headers中删除：

登录请求修正：

var response = await fetch(BASE_URL + 'login?useCookies=true', {
    method: 'POST',
    credentials: 'include',
    body: JSON.stringify({email, password}),
    headers: {'Accept': 'application/json', 'Content-Type': 'application/json'}
});
if(response.status==200)
{
    localStorage.setItem('user', email);
    location.replace('index.html');
}

用户信息请求修正（注意加await获取JSON数据，GET请求无需设置Content-Type）：

const userInfo = async () => {
    let response = await fetch(BASE_URL + 'account/user-info', {
        method: 'GET',
        credentials: 'include',
        headers: {'Accept': 'application/json'}
    })
    
    if(response.status ==200)
    {
        var jsonResponse = await response.json();
        console.log(jsonResponse); 
    }
}

2. 调整.NET Core Identity的Cookie配置 #

跨域场景下，必须明确配置Cookie的SameSite、Secure、Domain等属性，否则浏览器不会正常发送Cookie：

builder.Services.AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme)
    .AddCookie(options =>
    {
        options.Cookie.HttpOnly = true;
        // 本地开发若用HTTP可设为CookieSecurePolicy.None，生产环境必须用Always
        options.Cookie.SecurePolicy = CookieSecurePolicy.Always;
        // 同域不同端口用Lax；跨不同域名需设为None，且必须配合SecurePolicy.Always
        options.Cookie.SameSite = SameSiteMode.Lax;
        // 前后端均为localhost不同端口时，设置为localhost确保Cookie共享
        options.Cookie.Domain = "localhost";
        options.LoginPath = "/login";
    });

3. 确认CORS中间件顺序 #

在.NET Core中，中间件顺序直接影响功能生效，UseCors必须放在UseAuthentication和UseAuthorization之前：

app.UseCors(opt => {
    opt.SetIsOriginAllowed(origin => true)
        .AllowAnyMethod()
        .AllowAnyHeader()
        .AllowCredentials();
});

app.UseAuthentication();
app.UseAuthorization();

app.MapControllers();

4. 检查Cookie的Domain与Path #

登录接口返回的Cookie，需确保Domain和Path与前端请求地址匹配：

• 若前后端都是localhost不同端口，Domain设为localhost、Path设为/即可，保证所有接口都能携带Cookie；
• 若Path被设置为特定路径（如/api），则只有该路径下的请求会携带Cookie。

5. 验证请求是否携带Cookie #

在Chrome Network标签中查看account/user-info请求的Request Headers，确认是否包含Cookie头：

• 若没有，说明Cookie未被浏览器发送，回到前面步骤检查Cookie属性和CORS配置；
• 若有，需排查服务器端认证逻辑是否正确读取Cookie。

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