I'm using angular-msal2 to login to Azure AD and access my webapi on Azure. when I run http.get, it give me a CORS error as followed:
this.http.get("https://wgceworkflow-as.azurewebsites.net/api/demo/all")
.subscribe(r=>console.log(r));
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://login.microsoftonline.com/xxxxxxxx-xxxx-xxxx-xxxxxxxx/oauth2/v2.0/authorize?response_type=id_token&redirect_uri=https%3A%2F%2Fwgceworkflow-as.azurewebsites.net%2F.auth%2Flogin%2Faad%2Fcallback&client_id=xxxx-xxx-xxxx-xxxxxx&scope=openid+profile+email&response_mode=form_post&nonce=9dd0ec527a3a480abbd37e30d6d63499_20210531073718&state=redir%3D%252Fapi%252Fdemo%252Fall. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
Does anyone know how to fix this? This API works fine with JavaScript and I'm new to Angular.
Thank you.
PS: I know I can still use the old way to get id token manually and add it to the header, but MS said "The MSAL Angular wrapper takes advantage of the HTTP interceptor to automatically acquire access tokens silently and attach them to the HTTP requests to APIs.", I'm wondering how to use this feature.
