配置自定义主机名的本地IIS站点无法接收前端请求携带Cookie如何解决

核心原因 #

当前前端运行在http://localhost:4200、后端IIS站点运行在my-api.my.domain.cld属于跨域场景，需要同时完成服务端CORS配置、Cookie属性配置两处调整，才能让浏览器正常跨域携带Cookie。

具体配置步骤 #

• 配置IIS站点CORS规则

跨域场景下不允许使用*作为允许源，必须明确指定前端地址，同时开启凭据支持
.NET 6+ 项目在Program.cs中添加如下配置：

// 注册CORS服务
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowAngularDev", policy =>
    {
        policy.WithOrigins("http://localhost:4200")
              .AllowAnyHeader()
              .AllowAnyMethod()
              .AllowCredentials();
    });
});

// 中间件管道启用CORS，需放在路由之后、授权验证之前
app.UseCors("AllowAngularDev");

如果直接在IIS的web.config中配置，添加如下节点：

<system.webServer>
  <cors enabled="true">
    <add origin="http://localhost:4200" allowCredentials="true">
      <allowHeaders allowAllRequestedHeaders="true" />
      <allowMethods>
        <add method="GET" />
        <add method="POST" />
        <add method="PUT" />
        <add method="DELETE" />
        <add method="OPTIONS" />
      </allowMethods>
    </add>
  </cors>
</system.webServer>

• 调整登录接口Cookie下发属性

SameSite、Domain、Secure三个属性必须匹配跨域场景要求，否则浏览器会拦截Cookie存储和发送
在登录接口的Cookie下发逻辑中添加如下配置：

Response.Cookies.Append("认证Cookie名称", "Cookie存储值", new CookieOptions
{
    Domain = ".my.domain.cld", // 前缀加.可匹配所有二级子域名，也可直接写完整域名my-api.my.domain.cld
    SameSite = SameSiteMode.None, // 跨域场景必须设置为None
    Secure = false, // 本地HTTP开发设为false，HTTPS环境必须设为true
    HttpOnly = true, // 按需开启，避免前端JS读取Cookie提升安全性
    Expires = DateTimeOffset.Now.AddDays(7)
});

注意：SameSite = None要求必须搭配Secure = true才能在HTTPS环境下生效，HTTP本地开发环境除外

• 验证前端配置
  确认Angular全局请求已开启withCredentials: true，可通过拦截器统一配置：

// 自定义拦截器
@Injectable()
export class CredentialsInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    const clonedRequest = request.clone({
      withCredentials: true
    });
    return next.handle(clonedRequest);
  }
}

// 在app.module.ts的providers中注册拦截器
providers: [
  {
    provide: HTTP_INTERCEPTORS,
    useClass: CredentialsInterceptor,
    multi: true
  }
]

常见排查点 #

• 前端调用后端接口的地址必须是http://my-api.my.domain.cld开头，不能使用127.0.0.1或localhost，否则Domain匹配失败不会携带Cookie
• 测试前先清除浏览器现有缓存和旧Cookie，避免历史配置干扰
• 打开浏览器开发者工具「网络」标签，查看请求头中是否存在Cookie字段，响应头的Set-Cookie是否有报错提示

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