ASP.NET Core Web API+Identity搭配React SPA：身份认证Cookie无法存入浏览器？

我有一个采用Identity管理用户的ASP.NET Core Web API，前端为React单页应用（SPA），二者部署在不同服务器上。当前遇到的问题是前端登录功能失效：首次请求可完成登录，但浏览器无法保存后端返回的身份认证Cookie（响应中存在Set-Cookie头），该问题在本地测试及服务器部署后均存在。

已尝试的配置 #

builder.Services.ConfigureApplicationCookie(options => {
    options.Cookie.HttpOnly = true;
    options.Cookie.SecurePolicy = CookieSecurePolicy.Always; 
    options.Cookie.SameSite = SameSiteMode.None;
}

builder.Services.AddCors(options => {
    options.AddPolicy("AllowHost", builder => {
        builder.WithOrigins("http://localhost:3000")
               .AllowCredentials()
               .AllowAnyHeader()
               .AllowAnyMethod();
    });
});

app.UseCors("AllowHost");

排查与解决要点 #

• HTTPS协议匹配：配置中CookieSecurePolicy.Always要求Cookie仅在HTTPS环境下传输保存。如果本地测试前端用HTTP（如http://localhost:3000），浏览器会拒绝保存该Cookie。本地测试可临时将SecurePolicy改为CookieSecurePolicy.SameAsRequest，线上环境再恢复为Always。
• 调整中间件顺序：UseCors必须放在UseAuthentication和UseAuthorization之前，否则CORS策略无法生效。正确的中间件顺序示例：

  app.UseCors("AllowHost");
  app.UseAuthentication();
  app.UseAuthorization();
  

• 前端请求携带凭据：React发起登录等请求时，必须明确携带凭据配置。使用Axios时需设置withCredentials: true，使用Fetch API时需设置credentials: 'include'，示例如下：

  // Axios示例
  axios.post('/api/account/login', loginFormData, { withCredentials: true })
  
  // Fetch示例
  fetch('/api/account/login', {
    method: 'POST',
    credentials: 'include',
    body: JSON.stringify(loginFormData),
    headers: { 'Content-Type': 'application/json' }
  })
  

• Cookie域名配置：若前后端为不同子域名（如api.example.com和app.example.com），需设置options.Cookie.Domain = ".example.com"，让Cookie在主域名下共享。本地同域名不同端口场景可忽略此配置。
• 检查浏览器隐私设置：确认浏览器未开启“阻止第三方Cookie”选项，跨域场景下该设置会直接导致Cookie无法保存，可临时关闭后测试。

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