Angular 5调用AzureAD保护的WebAPI遭遇CORS问题求助

首先咱们拆解下你遇到的核心问题：直接浏览器调用WebAPI时认证正常，但Angular调用却触发CORS错误，错误指向login.microsoftonline.com的预检请求。这背后的关键原因是WebAPI的[Authorize]属性在检测到无效/缺失令牌时，默认会返回302重定向到Azure AD授权端点，但这个重定向响应没有CORS头，浏览器直接判定为跨域违规——毕竟login.microsoftonline.com和你的Angular源不属于同一域名。

下面是具体的修复步骤，按顺序操作即可：

1. 让WebAPI返回401而非302重定向 #

WebAPI默认的Azure AD认证逻辑在令牌无效时会重定向到登录页，但AJAX请求不需要这个重定向，而是需要明确的401响应。在WebAPI的Startup.cs（或OWIN配置类）里调整认证配置：

app.UseWindowsAzureActiveDirectoryBearerAuthentication(
    new WindowsAzureActiveDirectoryBearerAuthenticationOptions
    {
        Tenant = ConfigurationManager.AppSettings["ida:Tenant"],
        TokenValidationParameters = new TokenValidationParameters
        {
            ValidAudience = ConfigurationManager.AppSettings["ida:Audience"], // 此处填写WebAPI的Client ID
        },
        Notifications = new OAuthBearerAuthenticationNotifications
        {
            // 认证失败时返回401并添加CORS头
            AuthenticationFailed = context =>
            {
                context.Response.StatusCode = 401;
                // 替换为你的Angular实际域名+端口，比如"http://localhost:4200"
                context.Response.Headers.Add("Access-Control-Allow-Origin", new[] { "http://localhost:你的Angular端口" });
                context.HandleResponse(); // 阻止后续重定向逻辑
                return Task.CompletedTask;
            },
            // 拦截重定向请求，对AJAX返回401
            RedirectToIdentityProvider = context =>
            {
                // 通过X-Requested-With头判断是否为AJAX请求
                if (context.Request.Headers.ContainsKey("X-Requested-With"))
                {
                    context.Response.StatusCode = 401;
                    context.Response.Headers.Add("Access-Control-Allow-Origin", new[] { "http://localhost:你的Angular端口" });
                    context.HandleResponse();
                }
                return Task.CompletedTask;
            }
        }
    });

2. 完善WebAPI的CORS配置 #

你已经启用了CORS，但需要确保允许凭证传递和Authorization头（Bearer令牌通过这个头传递）。在WebAPI的WebApiConfig.cs里调整：

// 替换为你的Angular域名+端口
var cors = new EnableCorsAttribute("http://localhost:你的Angular端口", "*", "*")
{
    SupportsCredentials = true // 必须开启，带Bearer令牌的请求属于带凭证的请求
};
config.EnableCors(cors);

3. 在Angular请求中添加Bearer令牌 #

你的Angular代码目前没有把ADAL获取的令牌放到请求头里，WebAPI自然识别不到有效身份，才会触发重定向。修改Authenticate方法：

// 假设已注入ADAL服务（如adalService）
Authenticate(): Observable<any> {
    this.authServerUrl = "https://localhost:44371/";
    // 从ADAL缓存中获取令牌
    const token = this.adalService.getCachedToken(this.adalService.config.clientId);
    let httpOptions = {
        headers: new HttpHeaders({ 
            'Content-Type': 'application/json',
            // 将令牌放入Authorization头
            'Authorization': `Bearer ${token}`
        })
    };
    return this._http.get<any>(this.authServerUrl + '/api/aduser/profile', httpOptions);
}

4. 验证令牌的受众是否正确 #

最后要确认ADAL获取的令牌受众（aud字段）是WebAPI的Client ID，而非Angular应用的Client ID。可以把令牌复制到jwt.ms（本地解析，不会上传数据）查看aud值，如果不符，需要调整ADAL初始化配置，指定访问资源为WebAPI的Client ID：

this.adalService.init({
    clientId: 'Angular的Client ID',
    resource: 'WebAPI的Client ID', // 关键！指定要访问的资源是WebAPI
    // 其他配置项...
});

做完这些步骤，就能解决CORS错误了——本质是让WebAPI不再返回跨域重定向，而是返回标准401响应，同时确保Angular正确传递有效令牌，CORS配置覆盖所有必要场景。

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