Angular 5 调用 AzureAD 保护的 WebAPI 导致 CORS

Question

环境

• Angular 5 前端
• ASP.NET WebAPI 2
• WebAPI 上的 AzureAD 身份验证

配置

• WebAPI 为所有人启用 CORS (***)
• AzureAD 已启用 OAuthImplicitFlow
• Angular 和 WebAPI 托管在同一个 IIS 中，不同的端口

挑战

当通过浏览器直接调用 WebAPI 时，AzureAD 身份验证质询工作正常并且调用获得授权。但是，当 Angular 调用 WebAPI 时，AzureAD 的身份验证挑战会引发 CORS 问题。

Angular 应用程序不会直接调用 Azure（通过 adal-angular），它应该只通过 WebAPI 调用。Angular 应用程序成功调用了 WebAPI 上不受保护的 GET/POST 函数，因此 Angular-WebAPI 连接很好。

（更新 1 Angular APP 调用 ADAL-ANGULAR 与 Azure 进行身份验证并获取令牌，然后将相同的令牌作为承载传递给 WebAPI）

有什么想法我在这里错过了吗？可以根据需要提供任何特定的代码/配置。

代码

网络API

    [HttpGet]
    [Authorize]
    [Route(ApiEndPoint.AzureAD.GetMyProfile)]
    public async Task<ADUser> GetUserProfile()
    {
        ADUser user = null;

        GraphFacade graphFacade = new GraphFacade(this.graphServiceClient);       
        user = await graphFacade.GetMyProfileDetails();

        return user;
    }

角

  Authenticate(): Observable<any> {
    this.authServerUrl = "https://localhost:44371/";   // This is where WebAPI is running
    let httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) };
    let authRequest = this._http.get<any>(this.authServerUrl + '/api/aduser/profile', httpOptions);
    return authRequest;
  }

错误信息

无法加载 https://login.microsoftonline.com/common/oauth2/v2.0/authorize?client_id=fba45f7b ：对预检请求的响应未通过访问控制检查：没有“Access-Control-Allow-Origin”标头存在于请求的资源上。因此，不允许访问 Origin 'null'。

Answer 1

事情不是这样的。Http 客户端永远不会将您重定向到页面（在您的情况下为 AAD 登录页面）。它仅从资源检索内容/向资源发送内容。您可以使用window.location.replace()执行重定向，但这可能不是您想要的（令牌不会返回到您的角度应用程序）。

您需要选择Active Directory 身份验证库，例如adal-js或MSAL（您将找到两者的 Angular NPM 包），并使用 AAD 设置配置组件。然后，您可以从 Angular 客户端挑战登录并为您的 API 请求access_token。现在，您必须在针对（保护）API 发出的每个请求中传递授权 HTTP 标头中的 access_token。

请注意，您应该在 AAD 中创建另一个应用程序来代表您的 Angular UI，并授予该应用程序对您的 API 的访问权限。