React JS集成Azure AD SSO跨域令牌兑换错误排查求助

错误核心原因 #

你遇到的"Cross-origin token redemption is permitted only for the 'Single-Page Application' client-type"错误，并非代码逻辑问题，而是Azure AD应用注册的客户端类型配置错误。Azure AD仅允许标记为「单页应用(SPA)」的客户端进行跨域令牌兑换，你的应用当前大概率被注册为了「Web」类型。

解决步骤 #

1. 修正Azure AD应用注册配置 #

• 登录Azure门户，找到你的目标应用注册
• 进入「身份验证」页面
• 在「平台配置」区域：
  • 若存在「Web」类型的重定向URI，先删除它
  • 添加「单页应用(SPA)」类型的重定向URI，填入你的http://localhost:3000
• 保存所有更改

2. 代码优化建议（可选，提升SPA适配性） #

虽然现有代码能触发登录流程，但可以做以下规范优化：

完善MSAL客户端初始化

明确指定缓存存储类型为localStorage（SPA场景推荐），避免会话存储的跨域限制：

this.publicClientApplication = new PublicClientApplication({
  auth: {
    clientId: config.appId,
    redirectUri: config.redirectUri,
    authority: config.authority
  },
  cache: {
    cacheLocation: "localStorage",
    storeAuthStateInCookie: false // SPA场景无需启用，除非兼容旧浏览器
  }
})

登录成功后获取用户信息

在登录成功后主动获取用户账号信息，完善状态管理：

async login() {
  try {
    const loginResponse = await this.publicClientApplication.loginPopup({
      scopes: config.scopes,
      prompt: "select_account"
    });
    const activeAccount = this.publicClientApplication.getAccountByUsername(loginResponse.account.username);
    this.setState({ isAuthenticated: true, user: activeAccount });
  } catch (err) {
    this.setState({
      isAuthenticated: false,
      user: {},
      error: err.message || err.toString()
    });
  }
}

补充说明 #

Azure AD对不同客户端类型的令牌兑换逻辑有严格限制：

• 「Web」类型应用要求后端服务器完成令牌兑换，禁止前端跨域操作
• 「单页应用(SPA)」类型专门适配前端场景，支持PKCE授权码流程，允许前端直接跨域兑换令牌

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