'401 unauthorized Microsoft Graph Photo

I am trying to display the user profile photo from Microsoft Graph. I have the "User.Read" and "User.Read.All" scopes. I can successfully view the profile photo on my localhost but on my deployed dev, test, and prod apps on my App Service I get the following 401 error:

Failed to load resource: the server responded with a status of 401 (Unauthorized)

getProfilePhoto.js


  function getProfilePhoto() {
    const headers = {
      Authorization: `Bearer ${accessToken}`,
      "Content-Type": "image/jpeg",
    };
    const options = {
      method: "GET",
      headers: headers,
    };

    return fetch(graphConfig.graphMeEndpoint, options).then((response) => {
      if (response != null && response.ok) {
        response.blob().then((data) => {
          if (data !== null) {
            window.URL = window.URL || window.webkitURL;
            return setAvatar(window.URL.createObjectURL(data));
          }
        });
      }
    });
  }


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source