angularazure-active-directoryazure-ad-msaloidc-client

I'm getting a CORS policy issue when trying to redirect to Azure AD for authentication

I'm getting this error:

Access to XMLHttpRequest at 'https://login.microsoftonline.com/{tenantId}/oauth2/v2.0/authorize/.well-known/openid-configuration' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

when trying to redirect to azure for login.

Here's the service:

export class AuthService {
private _userManager: UserManager;

constructor(private http: HttpClient) {
    const config = {
        authority: Constants.stsAuthority,
        client_id: Constants.clientId,
        redirect_uri: `${Constants.clientRoot}assets/oidc-login-redirect.html`,
        scope: 'openid profile',
        response_type: 'id_token token',
        post_logout_redirect_uri: `${Constants.clientRoot}?postLogout=true`,
        userStore: new WebStorageStateStore({ store: window.localStorage })
      };
    this._userManager = new UserManager(config)
 }

 login(): Promise<any>{
     return this._userManager.signinRedirect();
 }

}

I'm sure I registered correctly my localhost url. Yet, I'm getting that error. So far, I didn't see any documentation dealing with that.

Thanks for helping

enter image description here

Solution

  • https://login.microsoftonline.com/{tenantId}/oauth2/v2.0/authorize/.well-known/openid-configuration is not a valid URL.

    Probably your authority is configured wrong. It should be just https://login.microsoftonline.com/tenant-id.