ASP.NET无法读取React前端设置的Steam认证Cookie问题排查

后端配置排查 #

1. 跨域（CORS）配置必须允许凭证 #

如果前后端跨域部署（如前端localhost:3000、后端localhost:5000），CORS 配置必须明确指定前端 Origin 并开启凭证支持，不能用通配符*（带凭证时通配符会失效）：

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowFrontend", policy =>
    {
        policy.WithOrigins("http://localhost:3000")
              .AllowAnyHeader()
              .AllowAnyMethod()
              .AllowCredentials(); // 核心：开启后浏览器才会发送 Cookie
    });
});

// 中间件顺序：CORS 必须放在认证中间件之前
app.UseCors("AllowFrontend");
app.UseAuthentication();
app.UseAuthorization();

2. 认证中间件顺序与 Cookie 配置 #

Steam 认证依赖 Cookie 认证，确保中间件顺序正确，同时 Cookie 属性要适配跨域场景：

builder.Services.AddAuthentication(options =>
{
    options.DefaultScheme = CookieAuthenticationDefaults.AuthenticationScheme;
    options.DefaultChallengeScheme = SteamAuthenticationDefaults.AuthenticationScheme;
})
.AddCookie(options =>
{
    options.Cookie.Name = "SteamAuthCookie"; // 自定义 Cookie 名，前后端要一致
    options.Cookie.SameSite = SameSiteMode.Lax; // 跨域 HTTPS 环境可设为 None，同时开启 Secure
    options.Cookie.SecurePolicy = CookieSecurePolicy.Always; // HTTPS 环境必须开启
    options.Cookie.HttpOnly = true; // 建议开启，防止 XSS，由浏览器自动携带 Cookie
})
.AddSteam(options =>
{
    options.ApplicationKey = "你的 Steam API Key";
    options.CallbackPath = "/api/auth/steam/callback"; // 必须与 Steam 后台配置的回调地址一致
});

注意：如果是前端手动设置 Cookie（而非后端认证中间件生成），后端无法识别——因为后端认证 Cookie 是加密的ClaimsPrincipal，前端存的 Steam 凭证格式不匹配。

3. 控制器认证检查逻辑 #

确保控制器中正确读取认证状态：

[ApiController]
[Route("api/auth")]
public class AuthenticationController : ControllerBase
{
    [HttpGet("check")]
    public IActionResult CheckAuth()
    {
        var isAuth = User.Identity?.IsAuthenticated == true;
        var cookieKeys = Request.Cookies.Keys;
        return Ok(new { IsAuthenticated = isAuth, CookieNames = cookieKeys });
    }
}

前端请求排查 #

1. 请求必须携带凭证 #

React 请求时必须显式开启凭证携带，否则浏览器不会发送 Cookie：

• Fetch 示例：

fetch('http://localhost:5000/api/auth/check', {
    method: 'GET',
    credentials: 'include' // 跨域场景用 include，同域用 same-origin
})
.then(res => res.json())
.then(console.log);

• Axios 示例：

axios.get('http://localhost:5000/api/auth/check', {
    withCredentials: true // 核心配置
});

2. Cookie 域名与路径匹配 #

前端设置 Cookie 时，需保证：

• Domain 设为localhost（不带端口，匹配前后端域名）
• Path 设为/，确保所有请求都携带该 Cookie
• HTTPS 环境下开启 Secure 属性，否则浏览器不会在 HTTPS 请求中发送 Cookie

3. 认证流程正确性 #

Steam OpenID 认证应由后端主导，正确流程：

1. 前端点击登录按钮，跳转至后端/api/auth/steam端点（触发 Steam 登录挑战）
2. 用户在 Steam 页面登录后，回调至后端/api/auth/steam/callback
3. 后端验证凭证，生成加密认证 Cookie，重定向回前端
4. 后续前端请求自动携带该 Cookie，后端通过认证中间件识别用户
   若前端直接与 Steam 交互并手动存 Cookie，后端无法识别该凭证格式。

快速定位方法 #

打开浏览器开发者工具的 Network 面板：

• 若请求的 Request Headers 中无Cookie字段：问题在前端（未开启凭证携带、Cookie 属性错误）
• 若有Cookie字段但后端拿不到：问题在后端（CORS 配置错误、中间件顺序错、Cookie 名称不匹配）

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