AADSTS50011报错：React应用Azure AD登录时回复URL与配置不匹配

AADSTS50011错误的唯一触发原因是：认证请求携带的重定向URI，与Azure AD应用注册中配置的回复URL未完全匹配。
你提供的authconfig.js代码截图如下：

排查步骤 #

• 核对Azure AD应用注册配置
  1. 进入Azure Active Directory管理中心，找到你注册的应用，打开「身份验证」选项卡
  2. 确认重定向URI的类型选择为 单页应用(SPA)，不要误选「Web」类型，MSAL.js 2.x+针对React这类SPA应用有单独的校验规则，类型选错即使地址完全一致也会报错
  3. 检查配置的URI值，必须和authconfig.js中redirectUri字段的取值完全一致：协议（http/https）、域名、端口号、路径、末尾斜杠、大小写全部不能有差异。比如代码里写http://localhost:3000，Azure中就不能配置为https://localhost:3000、http://localhost:3000/或者http://127.0.0.1:3000
• 核对authconfig.js代码配置
  1. 检查redirectUri字段没有拼写错误，开发环境要和本地React服务的启动地址完全匹配，生产环境要和部署后的实际域名完全匹配
  2. 如果配置了postLogoutRedirectUri字段，该值也需要同步添加到Azure AD应用注册的重定向URI列表中，否则登出时也会触发同类错误

常见踩坑点 #

• 本地开发如果同时开启了http和https服务，需要把两个对应的地址都添加到Azure的重定向URI列表中
• 多环境部署时，测试、预发、生产各环境的域名都要单独在Azure中添加对应的重定向URI
• SPA场景下不支持通配符格式的重定向URI，不要用https://*.yourdomain.com这类配置

内容的提问来源于stack exchange，提问作者Akshatha-M