Azure静态Web应用中Cookie持久化问题排查求助

我在Azure上搭建了一套方案：将.NET 6编写的Web API部署到App Service，Angular前端应用部署到Azure静态Web App，同时在后端App Service中配置了CORS以允许前端应用的源地址。该API采用Cookie认证，本地开发时正常，但部署到Azure后无法正常工作。我能看到认证端点的响应返回了Set-Cookie头，但Cookie似乎未在浏览器中持久化（开发者工具中无法查看），后续对受保护路由的请求均返回401状态码。此前将前端部署到Azure Blob存储时也遇到了相同问题。由于刚接触Azure，不知从何处着手排查，请问这是Azure配置错误还是代码问题？

相关代码 #

.NET后端认证配置代码 #

services
    .AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme)
    .AddCookie();

services.ConfigureApplicationCookie(config =>
{
    config.Events.OnRedirectToLogin = context =>
    {
        context.Response.StatusCode = StatusCodes.Status401Unauthorized;
        return Task.CompletedTask;
    };
});

特定端点使用[Authorize]属性保护，Angular应用中无处理用户会话的特定代码，Cookie由浏览器管理。

认证响应头信息 #

HTTP/1.1 200 OK
Content-Type: application/json; charset=utf-8
Date: Sun, 11 Feb 2024 19:20:20 GMT
Server: Kestrel
Access-Control-Allow-Origin: *** 已隐藏 ***
Cache-Control: no-store, no-cache
Expires: Thu, 01 Jan 1970 00:00:00 GMT
Pragma: no-cache
Set-Cookie: .AspNetCore.Identity.Application=CfDJ8ERMzqO_m2BLqQrwjTYL1sAo_a5Pkyd9TDtoraXGkrhdTJwpo6WJ3y_aechrqS4Pz3vsMPwWtn3JhVz93LtODs1Kvz0Ff7rHlwN6NItZOG2BnSRwGAEpz6YBrELFB1nX74Wg9c_uLkCJgCg_A_HkxdrIC06BaUQJkNJSKtN4Q7vSpqZ53FDhuGYobV45FToLFEJDMUu3d3k0Du6XXFMPblZBvI6HTiSYVWjfFf-qPNWZKL0TQtdc9DaX5dyxIxxIuwnubSdfSoBSn9UXDiSE3BcQY86VXkFRsp-DemEZYdtTSN-aWYDEowS6gVDd-TutBC14wh_9QFmpY0UTTfIuYTRmNIcGRWVMz1Vp1uz8WYJEPvWZILoaQfiubOxBtbwvo3KGCfK-cvIfJ9MZLzpRKeIZt1o29VxL-lBwqE_fG99fRWwhP5_9svsuchMyWyiqD4twvQ0Kv4z8XkgahO5F8HJSW4IZ38P1w1p3XuWP9843O6lt7ElqKdaUsypqMlPbAM70Iz4OhmRRoI-FLo49TvbHCZGTouixbMPuJajm8vnv1ca76CjHnAe1e2jlSp1cdyty-JLVrXoFGbSLO4dJv0U9fzzldxQd4as9JngZ33MrbYh0t8eYPWQNqkISacCS5b0Aihx-ehbNBFIo4iqsBrGrVUin6xTb939c4mFpuqhSxpLi0zFlWEC7ax0LN-RVR5f3y9mcsF5Fb-_WE0mcpVCvfRtGUtC1U-Mle9fz7H5N3nTFrwp9HH90ZnwFpM_nBDwo-ToBbY9cp_EoWwPj9zBKFR4dMvdwsdPk4y83PW9nGvNHZrdQO4Sxt35fYD40C2WyWESsXAORRp_jYiFMNpYDbNggZXo08UY_WjI1nYfc; path=/; secure; samesite=lax; httponly
Transfer-Encoding: chunked

核心原因分析 #

本地开发正常是因为前后端同域（如localhost下的不同端口），浏览器自动处理Cookie传递；部署到Azure后属于跨域场景，浏览器对跨域Cookie的存储和传递有严格规则，问题大概率出在跨域配置和Cookie属性设置上，与基础代码逻辑无关。

具体修复步骤 #

1. 调整Cookie的SameSite与Secure属性 #

当前Set-Cookie头使用SameSite=Lax，跨域场景下该模式不会自动携带Cookie到请求中。需要修改为SameSite=None，同时必须保留Secure属性（Azure部署默认是HTTPS环境，符合要求）。

修改后端认证配置代码：

services.ConfigureApplicationCookie(config =>
{
    config.Events.OnRedirectToLogin = context =>
    {
        context.Response.StatusCode = StatusCodes.Status401Unauthorized;
        return Task.CompletedTask;
    };
    // 添加以下配置
    config.Cookie.SameSite = SameSiteMode.None;
    config.Cookie.SecurePolicy = CookieSecurePolicy.Always;
});

2. 配置CORS允许凭据 #

• Azure端：进入App Service的CORS设置，勾选「允许凭据」选项，确保前端源地址已添加到允许列表。
• Angular端：所有涉及认证的HTTP请求必须携带withCredentials: true，示例：

  // 登录请求
  this.http.post('/api/auth/login', loginData, { withCredentials: true }).subscribe(...);
  // 受保护路由请求
  this.http.get('/api/protected', { withCredentials: true }).subscribe(...);
  

3. 验证HTTPS强制设置 #

确保App Service开启「强制HTTPS」（默认已开启），因为Secure属性的Cookie仅在HTTPS环境下会被浏览器存储和传递，HTTP请求会直接忽略该Cookie。

4. 检查浏览器隐私设置 #

部分浏览器的隐私模式或第三方Cookie拦截规则会阻止跨域Cookie，可先关闭隐私模式测试，或在浏览器设置中允许第三方Cookie。

总结 #

跨域场景下Cookie认证生效必须满足三个条件：

• Cookie设置SameSite=None + Secure属性
• CORS配置允许凭据
• 请求时携带withCredentials: true

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