4

现在我没有很好地集成 Angular 2 和 Azure AD。

重现错误的步骤：

  1. 我创建了一个 Angular 2 前端 Web API(suave.io) 并部署了 Azure
  2. 我已经在网站和 Web API 上设置了 Azure AD
  3. 关注了这篇文章：

https://blogs.msdn.microsoft.com/premier_developer/2017/04/26/using-adal-with-angular2/

  1. 我得到了持有者 Azure AD 令牌（很棒）
  2. 然后我调用Web API，我得到了

XMLHttpRequest 无法加载https://#### /groups/。预检响应无效（重定向） 这与此问题有关。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests

我的 Angular 2 代码是这样的：

let headers = new Headers();
headers.append("Content-Type", "application/x-www-form-urlencoded"); 
headers.append("Authorization", 'Bearer ' + this.adalService.accessToken ); 

return this._http.get(this.API_BASE + `groups/`, { headers: headers})
.map((response: Response) => response.json())

此调用删除授权令牌并发送选项调用。我相信请求失败是因为没有身份验证标头，并且 AD 在它到达 Web API 之前拒绝了它。

这是现在从 chome 发送的请求：

OPTIONS /groups/ HTTP/1.1 Host: dev-api-integration-####.azurewebsites.net Connection: keep-alive Access-Control-Request-Method: GET Origin: http://localhost:4200/ User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Access-Control-Request-Headers: authorization Accept: */* Referer: http://localhost:4200/ Accept-Encoding: gzip, deflate, sdch, br Accept-Language: en-GB,en-US;q=0.8,en;q=0.6

我的网络配置有：

<httpProtocol>
<customHeaders>
<clear />
<add name="Access-Control-Allow-Origin" value="http://localhost:4200/*" />
<add name="Access-Control-Allow-Headers" value="Authorization, Content-Type" />
<add name="Access-Control-Allow-Credentials" value="true"/>
<add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
</customHeaders>
</httpProtocol>

我能做些什么？这对我来说是目前的一个主要问题。我猜将来会有越来越多的人使用 Angular 2 和 AD 集成。任何提示或想法将不胜感激。

4

0 回答 0