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

<script src=@string.Format("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:

    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