如何在TypeScript/JavaScript中正确从Microsoft Graph API获取图片

我之前翻遍了网页、Stack Overflow甚至YouTube，都没找到在TypeScript/JavaScript里正确从Microsoft Graph API获取图片的清晰方案，结果实际操作下来发现比想象中简单太多——只需要在GET请求里添加一点额外配置就行。

举个最常见的获取用户头像的例子：

1. 首先确保你的请求已经带上了有效的身份验证令牌（比如通过MSAL获取的access token）
2. 发起GET请求时，关键要设置响应类型为blob，这样才能正确接收图片的二进制数据
3. 把返回的Blob对象转换成可用于页面展示的URL

下面是具体的代码示例：

使用Fetch API的写法（TypeScript/JavaScript通用） #

async function getUserProfilePhoto() {
  const accessToken = "你的有效Microsoft Graph访问令牌";
  try {
    const response = await fetch("https://graph.microsoft.com/v1.0/me/photo/$value", {
      method: "GET",
      headers: {
        Authorization: `Bearer ${accessToken}`
      },
      // 核心配置：指定响应类型为blob
      responseType: "blob" as RequestCredentials
    });

    if (!response.ok) {
      throw new Error(`请求失败: ${response.statusText}`);
    }

    const blob = await response.blob();
    // 将Blob转换为可在img标签中使用的URL
    const imageUrl = URL.createObjectURL(blob);
    
    // 示例：把图片插入到页面中
    const imgElement = document.createElement("img");
    imgElement.src = imageUrl;
    document.body.appendChild(imgElement);

    // 记得在不需要的时候释放URL资源，避免内存泄漏
    // imgElement.onload = () => URL.revokeObjectURL(imageUrl);
  } catch (error) {
    console.error("获取图片出错:", error);
  }
}

使用Axios的写法（TypeScript） #

import axios from "axios";

async function getUserProfilePhoto() {
  const accessToken = "你的有效Microsoft Graph访问令牌";
  try {
    const response = await axios.get("https://graph.microsoft.com/v1.0/me/photo/$value", {
      headers: {
        Authorization: `Bearer ${accessToken}`
      },
      // 核心配置：指定响应类型为blob
      responseType: "blob"
    });

    const imageUrl = URL.createObjectURL(response.data);
    // 后续展示逻辑同上...
  } catch (error) {
    console.error("获取图片出错:", error);
  }
}

为什么这个配置这么重要？因为默认情况下，请求会把二进制的图片数据当成文本解析，导致拿到的是乱码或者无法识别的内容。设置responseType: 'blob'后，浏览器会正确处理二进制流，让我们能把它转换成可用的图片URL。

另外要注意：

• 确保你的访问令牌拥有对应的权限（比如User.Read权限用于获取用户头像）
• 不同的图片端点（比如组头像、邮件附件图片等）写法类似，都是在对应的$value端点发起请求并设置响应类型为blob

内容的提问来源于stack exchange，提问作者Rebar