Search code examples
javascriptmicrosoft-graph-toolkit

Cors blocking when trying to use mgt-login and mgt-msal-provider

I cant seem to understand why im getting this problem, can anyone please help im developing in C# MVC web application

  • authority = https://login.microsoftonline.com/{tenant_id}/v2.0 (without {}) (remove the /v2.0 that fixed it for me thanks to Nikola Metulev comment :))
  • appId = client_id
<script [email protected]("https://unpkg.com/@microsoft/mgt/dist/bundle/mgt-loader.js")></script>

<mgt-msal-provider client-id=@appId
    login-type="popup"
    scopes="user.read,people.read"
    authority=@authority></mgt-msal-provider>

<mgt-login id="header-login" class="header-login"></mgt-login>

Picture of the error im getting

also when trying to connect to the login through mvc C# it works fine no cors errors there.

in javascript ive tried this to try and solve the cors error but did nothing

XMLHttpRequest.prototype.origOpen = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function () {
    this.origOpen.apply(this, arguments);
    this.setRequestHeader("Access-Control-Allow-Origin", "*");
    this.setRequestHeader("Access-Control-Allow-Headers", "*");
    this.setRequestHeader("Access-Control-Allow-Credentials", "true");
}

used * to just try and get it to work (also tried https://localhost:44375)

Solution

  • According to this documentation, the authority should be in this format:

    • https://login.microsoftonline.com/<tenant>/, where is the tenant ID of the Azure Active Directory (Azure AD) tenant or a domain associated with this Azure AD tenant. Used only to sign in users of a specific organization.
    • https://login.microsoftonline.com/common/. Used to sign in users with work and school accounts or personal Microsoft accounts.
    • https://login.microsoftonline.com/organizations/. Used to sign in users with work and school accounts.
    • https://login.microsoftonline.com/consumers/. Used to sign in users with only personal Microsoft accounts (formerly known as Windows Live ID accounts).

    Try removing the v2.0 from your authority string and see if that fixes the issue:

    authority = https://login.microsoftonline.com/{tenant_id}/v2.0