Now I am not very well integrating Angular 2 and Azure AD.
Steps to reproduce the error:
- I created Angular 2 frontend, web API (suave.io) and deployed Azure
- I installed Azure AD on the website and web API.
- Follow this article:
https://blogs.msdn.microsoft.com/premier_developer/2017/04/26/using-adal-with-angular2/
- I get the Azure Alphabet Token (excellent)
- Then I call the web API and I get
XMLHttpRequest cannot load https: // #### / groups /. The response to the pre-flight period is invalid (redirection) This is due to this problem.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests
My Angular 2 code:
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 . .