Azure Web App托管的React应用调用Microsoft Graph API返回401 Unauthorized问题

核心原因 #

你遇到的401未授权错误，绝大多数是因为从Azure App Service内置身份验证的/.auth/me接口拿到的访问令牌不满足Microsoft Graph API的调用要求，常见的具体场景如下：

• 令牌受众不匹配：你获取到的access_token默认受众是你的Web App本身，不是https://graph.microsoft.com，无法用于调用Graph接口
• 权限缺失：令牌中没有包含Graph所需的User.Read委托权限
• 代码请求头错误：你手动在请求中添加了Host头，属于浏览器跨域请求禁止修改的保留字段，会导致请求异常
• 权限未完成同意：Azure AD应用注册中配置的User.Read权限没有完成管理员同意，用户登录时也没有触发用户同意流程，令牌中无对应权限声明

修复步骤 #

步骤1：调整Azure App Service身份验证配置 #

1. 进入你的Azure Web App服务，找到「身份验证」菜单，点击你配置的Microsoft身份提供商进入编辑页
2. 确认「令牌存储」选项下的「访问令牌」、「ID令牌」都已勾选开启
3. 在提供商的权限配置中，添加https://graph.microsoft.com/User.Read作为委托权限
4. 保存配置后重启Web App生效

步骤2：修改代码问题 #

删除调用Graph接口时手动添加的Host: "graph.microsoft.com"请求头，浏览器会自动生成合法的Host头，手动指定会触发跨域限制导致请求失败。

步骤3：验证权限配置 #

进入Azure AD对应的应用注册页面，在「API权限」页确认User.Read委托权限已经完成租户管理员同意，避免用户登录时没有权限授权导致令牌缺失对应scope。

可选优化方案 #

如果你只需要用户基础信息（姓名、邮箱、用户ID等），不需要调用其他Graph接口，完全可以直接从/.auth/me接口返回的结果中直接提取对应字段，不需要额外调用Graph API，减少请求链路。

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