Angular5 SPA对接Azure AD OIDC获accessToken后请求头使用遇401问题

咱们一步步来拆解你的问题，先确认token有效性，再排查请求头配置的细节：

一、验证accessToken的有效性 #

accessToken是JWT格式的，你可以直接解析它来检查关键信息：

• 把token按.分割成三段，取第二段用URL安全的Base64解码，里面的JSON包含核心声明：
  • aud：受众字段，必须和你要调用的目标API的标识符完全匹配（比如调用自己的API就是它的应用ID URI，调用Graph API就是https://graph.microsoft.com）
  • exp：过期时间，是Unix时间戳，转成常规时间看看是否已经过期
  • iss：签发者，应该是https://login.microsoftonline.com/{你的租户ID}/v2.0（v2端点）或者对应的v1端点地址
• 同时检查Azure AD应用注册配置：
  • 你的SPA应用是否已经添加了目标API的权限，并且完成了管理员同意（如果是需要管理员权限的API）
  • 确保获取token时请求的scope包含了目标API的必要权限（比如api://{api-client-id}/access_as_user）

二、请求头的正确配置 #

发送请求时，必须严格遵循以下规范：

• Authorization头：这是核心，格式为 Bearer {你的accessToken}，注意Bearer后面必须有一个空格——这是最容易踩的坑
• Content-Type头：如果是POST请求发送JSON数据，必须添加 Content-Type: application/json，否则服务器可能无法正确解析请求体
• 其他自定义头：只有部分特殊API会要求，先确保前两个头配置正确

三、Angular代码里的常见问题排查 #

你在app.component.ts的ngOnInit里保存token，先确认token本身没问题：

1. 先console.log(this.accessToken)，看看输出的token是否完整，有没有被截断或者格式异常
2. 用Angular的HttpClient发送请求的正确示例：

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  private accessToken: string;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    // 假设你已经在这里完成token获取与保存
    this.accessToken = '你的有效token值';
    this.testApiRequest();
  }

  testApiRequest() {
    const headers = new HttpHeaders({
      'Authorization': `Bearer ${this.accessToken}`,
      'Content-Type': 'application/json'
    });

    // 替换为你的目标API地址
    this.http.get('https://your-api-domain.com/api/data', { headers })
      .subscribe({
        next: (res) => console.log('请求成功:', res),
        error: (err) => {
          console.error('请求失败:', err);
          // 根据错误码快速定位：
          // 401 Unauthorized → token无效/格式错误/受众不匹配
          // 403 Forbidden → token权限不足，API权限未配置正确
          // CORS错误 → 目标API未允许你的localhost域名跨域
        }
      });
  }
}

四、额外排查步骤 #

• 打开浏览器开发者工具的Network标签，查看发送的请求：
  • 确认Authorization头是否存在，且值的格式完全正确
  • 查看响应的错误详情，里面的提示信息会帮你快速定位问题
• 如果是调用自己开发的API，还要确保API端的Azure AD验证逻辑正确，比如正确验证token的签名、受众和签发者

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