Angular应用调用Microsoft Graph API获取用户头像遇CORS错误

问题核心 #

你碰到的CORS错误本质是：浏览器要求当请求的credentials mode为include时，响应头Access-Control-Allow-Origin不能使用通配符*。Postman能正常请求是因为它不受浏览器的CORS规则约束，而Angular运行在浏览器环境下必须遵守该规则。

可行解决方案 #

1. 调整Angular请求的凭据配置 #

如果你的请求不需要携带凭据（如Cookie、HTTP认证信息），可以关闭withCredentials：

// Angular HttpClient 请求示例
this.http.get('https://graph.microsoft.com/v1.0/me/photos/240x240/$value', {
  responseType: 'blob',
  withCredentials: false // 关闭凭据携带
}).subscribe(blob => {
  // 处理头像Blob数据
});

⚠️ 注意：如果请求依赖用户身份凭据（比如登录后的会话令牌），此方法不适用，关闭后请求会丢失身份信息导致权限验证失败。

2. 通过后端代理转发请求 #

浏览器的CORS限制仅针对前端直接跨域调用接口，最稳妥的方式是借助自己的后端服务转发请求：

• 在你的后端（如Node.js、.NET、Java等）创建一个中转接口，比如/api/user-avatar
• 后端接口内部调用Microsoft Graph的头像接口，带上用户的身份令牌
• Angular前端调用同域的后端接口，避免跨域问题

示例Node.js（Express）后端代码：

const express = require('express');
const axios = require('axios');
const app = express();

app.get('/api/user-avatar', async (req, res) => {
  try {
    // 获取前端传入的用户身份令牌
    const authToken = req.headers.authorization;
    const graphResponse = await axios.get('https://graph.microsoft.com/v1.0/me/photos/240x240/$value', {
      headers: { Authorization: authToken },
      responseType: 'stream'
    });
    // 将Graph的响应流直接转发给前端
    graphResponse.data.pipe(res);
  } catch (err) {
    res.status(err.response?.status || 500).send(err.message);
  }
});

app.listen(3000);

Angular前端请求示例：

this.http.get('/api/user-avatar', {
  responseType: 'blob',
  headers: { Authorization: `Bearer ${userToken}` }
}).subscribe(blob => {
  // 处理头像数据
});

3. 检查Azure AD应用的CORS配置 #

确认Azure门户中AD应用的CORS配置正确：

• 登录Azure门户，找到你的AD应用注册
• 进入「CORS」配置项（在API权限旁）
• 添加你的前端完整域名（如https://example.com），不要使用通配符*
• 保存配置后等待几分钟生效

⚠️ 注意：Microsoft Graph自身的CORS响应头由微软管理，你无法直接修改，因此必须通过上述两种方式规避浏览器的CORS限制。

内容的提问来源于stack exchange，提问作者Ashutosh Ranjan Jha