Why I am not able to authenticate with Microsoft Graph Explorer through Sharepoint Custom Web Part only in Edge Browser

Question

I have deployed a custom web part on sharepoint online, in which I am authenticate with Microsoft Graph Explorer.

It is authenticated through Sharepoint Custom Web Part successfully in Chrome, IE and Firefox but not authenticated in Edge.

In Edge I've getting below error:

description: "Invalid argument"
message: "Invalid argument"
number: -2147418113
stack: "TypeError: Invalid argument at Anonymous function (https://spoprod-a.akamaihd.net/files/sp-client-prod_2019-05-31.012/sp-pages-assembly_en-us_80b161431b1b8ce356b58dd5ab1df0cc.js:1178:42819)

This is my method in which I found that at the time of calling microsoft graph explorer API("https://graph.microsoft.com"), in Chrome, IEand Firefox the API provides the response, but in Edge it goes in catch part and throws error.

private _getListApplications(param): Promise<any> {
  return this.context.aadHttpClientFactory.getClient('https://graph.microsoft.com')
  .then((client: AadHttpClient) => {
      return client.get("https://graph.microsoft.com/beta/applications",AadHttpClient.configurations.v1);
      }).then((responseListAllApps: SPHttpClientResponse) => {
         return responseListAllApps.json();
         }).catch(err => { console.log('errr', err); });
}

Answer 1

It looks like there is some change in the back-end because of which the code has kinda stopped working in Edge and IE.

As a workaround for now, would suggest that you set the header values explicitly.

You need to add the below code for headers, don't forget to import ISPHttpClientOptions from @microsoft/sp-http module:

let httpOptions: ISPHttpClientOptions = {
    headers: {
        "accept": "application/json",
        "content-type": "application/json"
    }
};

After that your full code will be as below:

private _getListApplications(param): Promise<any> {

    let httpOptions: ISPHttpClientOptions = {
        headers: {
            "accept": "application/json",
            "content-type": "application/json"
        }
    };

  return this.context.aadHttpClientFactory.getClient('https://graph.microsoft.com')
  .then((client: AadHttpClient) => {
      return client.get("https://graph.microsoft.com/beta/applications",AadHttpClient.configurations.v1, httpOptions);
      }).then((responseListAllApps: SPHttpClientResponse) => {
         return responseListAllApps.json();
         }).catch(err => { console.log('errr', err); });
}