Question

我试图从angular5 app调用Azure AD保护的azure函数api。 CORS在Azure功能中配置，当API匿名时，我可以正确调用此API（证明CORS配置正确）。现在我的Angular5应用程序也受Azure AD保护（使用与Azure功能相同的Azure AD应用程序）。在调用Azure功能时，我将登录用户的访问令牌作为承载令牌传递给头。但是我的API调用因以下错误而失败：

Failed to load https://login.windows.net/<tenantid value here>/oauth2/authorize?response_type=code+id_token&redirect_uri=https://<functionurl>.azurewebsites.net/.auth/login/aad/callback&client_id=<clientid>&scope=openid+profile+email&response_mode=form_post&nonce=<some alphanumeric>&state=redir=/api/Projects/Country/IN: Redirect from 'https://login.windows.net/<tenanid>/oauth2/authorize?response_type=code+id_token&redirect_uri=https://<functionurl>.azurewebsites.net/.auth/login/aad/callback&client_id=<clientid>&scope=openid+profile+email&response_mode=form_post&nonce=<some alphanumeric>&state=redir=/api/Projects/Country/IN' to 'https://login.microsoftonline.com/<tenantid>/oauth2/authorize?response_type=code+id_token&redirect_uri=https://<functionurl>.azurewebsites.net/.auth/login/aad/callback&client_id=<clientid>&scope=openid+profile+email&response_mode=form_post&nonce=<some alphanumeric>&state=redir=/api/Projects/Country/IN' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

我正在使用ng2-adal登录用户并获取访问权限。此外，我创建了一个tokeninterceptor，将bearer标记放入所有http请求中。

    import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor
} from '@angular/common/http';
import { AuthenticationService } from './authentication.service';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class TokenInterceptor implements HttpInterceptor {
  constructor(public authSvc: AuthenticationService) {}
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    request = request.clone({
      setHeaders: {
        Authorization: `Bearer ${this.authSvc.getCachedToken()}`
      }
    });
    return next.handle(request);
  }
}

更新这个问题现在解决了。我错过的是使用以下设置更新Azure AD应用程序的清单（默认情况下为false）：

“oauth2AllowImplicitFlow”: true

从Angular5应用程序调用Azure AD保护Azure功能

0 个答案: