Angular Azure Active Directory B2C Authentication - CORS issue

Question

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.

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

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, Feb 24 '20 at 11:47
@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, Feb 24 '20 at 12:27
@juunas yes your right. While run "signin" policy from "Userflow" it is redirecting to http://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, Feb 24 '20 at 12:35
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, Feb 24 '20 at 16:56
It is a Get request to that endpoint. The library I am using in angular is MSAL — mani, Feb 25 '20 at 05:56
@juunas i get that it isnt your API / you cant control (add) response headers easily, but i think its highly likely that there is some option / setting that adds those headers — matri70boss, Feb 25 '20 at 13:32
I have one solution that we have to take one custom page and deploy it in Azure WebApp and enable cors by this cors will work and redirect to http://localhost:4299 — mani, Mar 24 '20 at 04:57
Have you tried using the b2clogin.com and latest msal version? — Jas Suri - MSFT, Jan 12 '21 at 16:05
I'm experiencing the same CORS error using the `knownAuthorities: ['myapp.b2clogin.com']` parameter. — AxeEffect, Jan 13 '21 at 07:26

score 1 · Accepted Answer · answered Jan 13 '21 at 08:08

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?

Angular Azure Active Directory B2C Authentication - CORS issue

1 Answers1