Angular MSAL SSO本地运行：/token API遇CORS及严格策略错误求助

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

• 登录Azure门户进入目标应用注册，打开「CORS」选项卡
• 删除所有通配符*的来源（Azure AD的Token端点不允许通配符CORS来源）
• 添加本地Angular应用的完整地址，比如http://localhost:4200（若使用其他端口则替换），注意不要加末尾斜杠
• 确保「允许的方法」包含GET、POST、OPTIONS（Azure默认允许所有方法，可保持默认）
• 保存配置后等待5-10分钟让设置生效

2. 确保MSAL Angular初始化配置与应用注册完全匹配 #

在app.module.ts的MsalModule.forRoot配置中，重点检查以下参数：

MsalModule.forRoot(
  new PublicClientApplication({
    auth: {
      clientId: '你的应用注册Client ID', // 必须与应用注册信息一致
      authority: 'https://login.microsoftonline.com/你的租户ID', // 租户ID需准确
      redirectUri: 'http://localhost:4200', // 与应用注册的重定向URL完全匹配，含HTTP/HTTPS、端口
    },
    cache: {
      cacheLocation: 'localStorage', // 可选，sessionStorage也可使用
      storeAuthStateInCookie: false, // 本地开发一般设为false
    }
  }),
  // 其他路由、拦截器配置...
)

• 禁止手动修改MSAL发送的请求头，所有认证请求由MSAL自动处理，自定义头会触发Azure AD的安全策略报错

3. 本地开发调试的正确操作 #

• 清空浏览器缓存（尤其是本地存储和Cookie），避免旧配置残留干扰
• 重启Angular开发服务器（执行ng serve），确保新配置加载生效
• 如果是调用自定义后端API时出现CORS，需在后端服务中配置允许http://localhost:4200的跨域请求，而非修改MSAL的认证请求逻辑

4. 排查版本兼容性问题 #

• 确保@azure/msal-angular和@azure/msal-browser的版本完全一致，避免因版本不匹配导致请求异常
• 建议升级到最新稳定版，修复已知的CORS相关bug

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