Azure AD应用能否同时配置SPA与Web应用？MSAL跨源报错咨询

多平台配置支持结论 #

Azure AD（Microsoft Entra ID）完全支持在同一个应用注册下同时配置SPA（单页应用）、Web应用两类平台，无需为不同端拆分独立应用注册。

报错根因 #

你遇到的Cross-origin token redemption is permitted only for the 'Single-Page Application' client-type报错，本质是平台类型配置错误：
msal.js运行在浏览器端，属于公开客户端的SPA类型，Azure AD要求这类跨源发起的前端令牌兑换请求，对应的重定向URI必须归属在「单页应用程序」平台分类下。你当前把前端用到的localhost地址配置在了「Web」平台分类下，该分类对应需要服务端完成令牌兑换的机密客户端场景，会直接拦截浏览器侧的跨源令牌兑换请求。
另外你当前的配置还存在两个明显错误：

• 重定向URI格式非法：你填写的localhost:/5020、localhost:/5030缺少协议和双斜杠，属于无效地址，正确格式应为http://localhost:5020这类完整格式
• 错误给Web API配置重定向URI：重定向URI仅对发起登录授权请求的客户端生效，Web API作为资源提供方，不需要配置重定向URI，仅需配置公开作用域、授权客户端规则即可。

修复步骤 #

• 进入Azure AD应用注册的「身份验证」配置页，删除之前错误添加在Web平台下的localhost:/5020重定向项
• 点击「添加平台」，选择「单页应用程序」分类，填入React前端的正确重定向地址http://localhost:5020后保存配置
• 删除之前给Web API配置的无效重定向URI，转到「公开API」菜单配置API所需的作用域即可
• 如果你的后端Web服务本身需要独立的服务端登录流程，可以保留Web平台配置，填入后端服务对应的正确重定向地址（比如http://localhost:5030），该配置和SPA平台的配置互不冲突
• 检查前端msal.js初始化代码，确认auth.redirectUri参数值和你在SPA平台配置的重定向URI完全一致，避免末尾斜杠、协议不匹配导致的校验失败

校验提示：配置完成后等待1-2分钟让配置生效，再重新发起登录请求即可，不需要重新创建应用注册。

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