CORS error when adding Azure AD authentication

Question

Trying to add Azure AD authentication to an Angular 7 webapp with a .net core 2.1 backend.

However, I get the CORS error during the request.

\"Access to XMLHttpR

Answer 1

Your approach is a bit wrong. You've configured OIDC + Cookies, yet want to call it with an XHR.

The typical approach would be to:

• Configure JWT Bearer token authentication on the API
• Use ADAL/MSAL on the front-end to authenticate the user + acquire an access token for the back-end
• Attach the access token to XHRs so they are authenticated

Some samples/articles that may help:

• https://github.com/Azure-Samples/active-directory-angularjs-singlepageapp-dotnet-webapi
• https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/MSALAngularDemoApp
• https://github.com/azure-samples/active-directory-dotnet-native-aspnetcore-v2
• https://joonasw.net/view/azure-ad-authentication-aspnet-core-api-part-1
• https://joonasw.net/view/azure-ad-authentication-aspnet-core-api-part-2

Keep in mind ADAL can only be used with the AAD v1 endpoint and MSAL with the v2 endpoint.