从@Azure/MSAL升级至MSAL.js 2.0出现CORS网络请求失败报错

核心报错信息 #

Network request failed: If the browser threw a CORS error, check that the redirectUri is registered in the Azure App Portal as type 'SPA'

排查修复步骤 #

1. 优先核对Azure门户重定向URI配置 #

这是该报错最高发的诱因：

• 进入对应Azure AD应用注册的「身份验证」配置页
• 核对代码中配置的redirectUri和门户中添加的地址完全一致，重点确认该地址所属平台类型必须选择单页应用程序(SPA)，不能选择“Web”类型。
  MSAL.js 2.0默认使用PKCE授权码流，只有标记为SPA类型的重定向URI支持跨域令牌请求，若配置为Web类型，Azure AD会直接拒绝跨域请求触发CORS报错。
• 本地调试用的localhost地址也需要添加到SPA类型的重定向URI列表中，Azure AD对本地地址的跨域校验规则和线上地址一致。

2. 修正ssoSilent调用配置 #

替换acquireTokenSilent()为ssoSilent()的思路是正确的，需要注意几个容易遗漏的配置点：

• 参数名拼写校验：MSAL 2.x中传入的登录提示参数名为loginHint，不是旧版本的logon_hint，拼写错误会导致静默请求无法读取已有登录上下文，触发异常跳转。
• 关闭隐式流配置：在身份验证页的「隐式授权和混合流」板块，取消勾选ID令牌、访问令牌选项，MSAL 2.0的PKCE流和隐式流逻辑冲突，开启后会干扰静默请求逻辑。
• 重定向URI不要指向需要鉴权的业务页面，建议配置为匿名可访问的空白静态回调页，避免页面自身的鉴权重定向逻辑打断ssoSilent的请求流程。

3. 本地环境干扰项排查 #

• 若浏览器安装了跨域修改、广告拦截类插件，先临时关闭后重试，这类插件会修改请求头触发Azure AD的跨域拦截。
• 配置调整完成后，清空浏览器对应站点的缓存、第三方Cookie后再测试，旧的无效登录缓存会导致静默请求复用错误上下文。

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