Angular Azure Active Directory B2C Authentication - CORS issue

11
votes

I am implementing Azure Active Directory B2C authentication in Angular. I am using msal interceptor to connect Azure AD B2C. The authentication request fails with error

Access to XMLHttpRequest at 'https://login.microsoftonline.com/...' from origin 'http://localhost/...' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

browser console screenshot

I configured everything according to this post: https://medium.com/@sambowenhughes/configuring-your-angular-6-application-to-use-microsoft-b2c-authentication-99a9ff1403b3

1
angularazure-ad-b2cmsalazure-authentication
Im not familiar with your technologies, but ive encountered CORS error (php + react), what it is actually saying is that you need to have present response header "access-control-allow-origin" with correct value (or wildcard ). Maybe as a quick dirty fix (obviously not for production only for dev) try using some cors browser extension ? – matri70boss
@matri70boss The error is coming from Azure AD B2C in this case, for which we cannot control CORS headers. The URL seems to be correct format though, it seems a bit odd that CORS is being blocked by B2C in this case :\ – juunas
@juunas yes your right. While run "signin" policy from "Userflow" it is redirecting to localhost:4200 and I am getting token but while running from an angular application I am getting cors issue. Do you have an idea on how to solve this issue or I have to make any configuration changes in Azure AD B2C tenant to enable cors from my origin – mani
Is it a GET request or some other HTTP Method? We only support GET to that endpoint. Some libraries try to do OPTIONS, which fails. – Jas Suri - MSFT
It is a Get request to that endpoint. The library I am using in angular is MSAL – mani

1 Answers

1
votes

That article is about two years old and this.clientApplication.authority = "https://login.microsoftonline.com/tfp/" doesn't look right. It should be something like https://${b2cTenantName}.b2clogin.com/${b2cTenantName}.onmicrosoft.com/B2C_1_Sign_In.

Can you try to configure the angular sample app from https://github.com/Azure-Samples/active-directory-b2c-javascript-angular-spa and use that as a starting point?