如何从Angular客户端向启用Windows认证的ASP.NET WebAPI传递凭据？

我刚好处理过类似的场景，给你梳理一下完整的实现步骤，涵盖 Angular 配置、后端 IIS/WebAPI 配置以及常见问题排查：

一、理解浏览器的核心限制 #

Windows 身份认证（NTLM/Kerberos）依赖浏览器的自动身份验证机制，所以首先要满足：

• Angular 应用与 WebAPI 处于同一域（比如都是 http://yourdomain.com 下的不同路径）；
• 如果是跨域场景，必须将 WebAPI 域名添加到浏览器的「本地 Intranet」或「可信站点」区域，否则浏览器会拒绝自动发送当前用户的 Windows 凭据；
• 跨域时，Access-Control-Allow-Origin 不能使用通配符 *，必须指定 Angular 应用的具体域名。

二、Angular 端配置：全局启用凭据传递 #

要让所有 HTTP 请求都携带 Windows 凭据，最优雅的方式是使用 HttpInterceptor 全局配置：

1. 创建 Windows 身份认证拦截器 #

在 Angular 项目中新建拦截器文件（比如 windows-auth.interceptor.ts）：

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class WindowsAuthInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 克隆请求并添加 withCredentials 选项，这是关键！
    const authRequest = request.clone({
      withCredentials: true
    });

    return next.handle(authRequest);
  }
}

2. 在 AppModule 中注册拦截器 #

打开 app.module.ts，将拦截器注入到 HTTP 拦截器队列：

import { NgModule } from '@angular/core';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { WindowsAuthInterceptor } from './windows-auth.interceptor';

@NgModule({
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: WindowsAuthInterceptor,
      multi: true // 允许多个拦截器同时生效
    }
  ]
})
export class AppModule { }

三、后端 IIS 与 WebAPI 配置 #

1. IIS 站点身份认证配置 #

• 打开 IIS 管理器，找到你的 WebAPI 站点；
• 进入「身份验证」功能，禁用匿名身份验证，启用 Windows 身份验证；
• 双击「Windows 身份验证」，确认 NTLM 和 Kerberos 均已启用（默认已开启）。

2. WebAPI 身份认证与授权配置 #

在 WebAPI 项目的 Web.config 中添加/修改以下配置：

<system.web>
  <!-- 启用 Windows 身份认证 -->
  <authentication mode="Windows" />
  <!-- 拒绝匿名用户访问 -->
  <authorization>
    <deny users="?" />
  </authorization>
</system.web>

3. 跨域（CORS）配置（如果 Angular 与 API 跨域） #

如果 Angular 应用和 WebAPI 不在同一域，必须配置 CORS 允许凭据传递：

方式一：通过 IIS 配置 CORS

在 Web.config 的 <system.webServer> 节点下添加：

<httpProtocol>
  <customHeaders>
    <!-- 替换为你的 Angular 应用域名 -->
    <add name="Access-Control-Allow-Origin" value="http://localhost:4200" />
    <!-- 必须设置为 true，允许传递凭据 -->
    <add name="Access-Control-Allow-Credentials" value="true" />
    <!-- 允许的请求头，按需添加 -->
    <add name="Access-Control-Allow-Headers" value="Content-Type" />
  </customHeaders>
</httpProtocol>

方式二：通过 WebAPI 代码配置 CORS（OWIN 方式）

如果你的 WebAPI 使用 OWIN 启动，可在 Startup.cs 中配置：

using Microsoft.Owin.Cors;
using Owin;

public void Configuration(IAppBuilder app)
{
    // 配置 CORS，允许指定域名的凭据传递
    app.UseCors(new CorsOptions
    {
        PolicyProvider = new CorsPolicyProvider
        {
            PolicyResolver = context =>
            {
                var policy = new System.Web.Cors.CorsPolicy();
                policy.AllowAnyMethod = true;
                policy.AllowAnyHeader = true;
                // 添加你的 Angular 应用域名
                policy.Origins.Add("http://localhost:4200");
                policy.SupportsCredentials = true;
                return Task.FromResult(policy);
            }
        }
    });

    // 其他 WebAPI 配置...
}

四、常见问题排查 #

• 401 未授权错误：检查 IIS 是否禁用了匿名认证，浏览器是否将 API 域名加入本地 Intranet，跨域时 Access-Control-Allow-Origin 是否为具体域名而非 *；
• 浏览器弹出登录框：通常是因为 API 域名不在浏览器的可信区域，或者当前用户没有访问 API 的权限；
• Kerberos 认证失败：如果是域环境，需要为 IIS 应用池账户注册 SPN（服务主体名称），否则会 fallback 到 NTLM（NTLM 在大多数场景下可正常工作）。

内容的提问来源于stack exchange，提问作者Ivan-Mark Debono