Проблемы с Azure AD, Angular 2 и предпечатной проверкой недопустимы (перенаправление)
Сейчас я не очень хорошо интегрирую Angular 2 и Azure AD.
Шаги для воспроизведения ошибки:
- Я создал внешний интерфейс Angular 2, веб-API(suave.io) и развернул Azure.
- Я настроил Azure AD на веб-сайте и в веб-API
- Следил за этой статьей:
https://blogs.msdn.microsoft.com/premier_developer/2017/04/26/using-adal-with-angular2/
- Я получаю токен Azure AD на предъявителя (отлично)
- Затем я вызываю Web API и получаю
XMLHttpRequest не может загрузить https: / groups /. Ответ на предпечатную проверку недействителен (перенаправление) Это связано с этой проблемой.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
Мой код 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())
Этот вызов удаляет токен авторизации и отправляет вызов Option. Я считаю, что запрос не выполняется, поскольку отсутствует заголовок проверки подлинности, и AD отклоняет его, прежде чем он попадет в веб-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 в будущем. Любые советы или идеи будут высоко оценены.