Azure AD B2C CORS errors

Question

I'm trying to run the sample

https://github.com/Azure-Samples/active-directory-b2c-javascript-msal-singlepageapp

Part 1 works fine. I'm trying Part II with my own Azure AD B2C.

I updated policies.js file with the URL from my signup user flow and authconfig.js with my application id.

const b2cPolicies = {
    names: {
        signUpSignIn: "B2C_1_sign_up_sign_in",
    },
    authorities: {
        signUpSignIn: {
            authority: "https://zzz.b2clogin.com/zzz.onmicrosoft.com/v2.0/.well-known/openid-configuration?p=B2C_1_sign_up_sign_in",
        }

However I get a CORS error:

Access to XMLHttpRequest at 
https://zzz.b2clogin.com/zzz.onmicrosoft.com/v2.0/.well-known/openid-configuration?p=B2C_1_sign_up_sign_in/v2.0/.well-known/openid-configuration' from origin 'http://localhost:6420' 
has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

The sample clearly expects to run from localhost as per the instructions. Is there anything missing in my config? any ideas?

The fact that it generates a double ./wellknown is suspicious but I don't know how to set the msalConfig otherwise.

update: I have tried removing the .wellknown part of the url but it still doesn't work. The request looks better as it doesn't have a duplicate .wellknown bit but it doesn't have the p=B2C_1_sign_up_sign_in which I believe is essential.

Most likely your MSAL config is wrong since the URL constructed is wrong. Could you show how it looks like? — juunas
@juunas see above, I copied it from the "Run user flow" dialog. — Koenig Lear

juunas juunas · Accepted Answer · 2020-06-20T09:41:45

Notice in the sample the authority is defined as:

signUpSignIn: {
    authority: "https://fabrikamb2c.b2clogin.com/fabrikamb2c.onmicrosoft.com/b2c_1_susi",
},

So you should define the authority as:

https://zzz.b2clogin.com/zzz.onmicrosoft.com/B2C_1_sign_up_sign_in

Azure AD B2C CORS errors

2 Answers