Azure单页应用OAuth2授权遇CORS错误，请求遭login.live.com拦截

核心问题原因 #

你当前通过AJAX请求获取微软登录页面HTML并在SPA中渲染的方式，会导致登录页脚本在localhost:3000域名下执行。向login.live.com发起的内部请求会触发浏览器CORS拦截——微软登录API仅允许在自身域名下发起这类请求，不支持跨域调用。

解决方案 #

1. 改用弹窗/页面跳转打开登录页 #

不要通过AJAX获取登录页面HTML，直接打开微软授权端点地址：

• 弹窗方式：用window.open()打开login.microsoftonline.com/consumers/oauth2/v2.0/authorize，携带所有必要参数（client_id、redirect_uri等）。登录完成后，通过弹窗与父页面通信获取授权码。
• 页面跳转方式：直接将当前页面跳转到授权端点，登录完成后微软会重定向回你的redirect_uri并携带授权码。

两种方式的核心是让登录流程完全在微软域名下执行，从根源避免跨域问题。

2. 确认Azure应用注册的平台类型 #

在Azure应用注册中，必须选择**单页应用(SPA)**类型，而非Web应用。SPA平台的重定向URI配置会触发微软针对SPA场景的CORS策略适配，Web应用配置不适用该场景。

3. 校验重定向URI的一致性 #

确保Azure中配置的重定向URI和请求中redirect_uri参数完全一致：

• 注意结尾斜杠：http://localhost:3000与http://localhost:3000/是两个不同URI，必须完全匹配。
• 确保URI为URL编码格式（如请求中的http%3A%2F%2Flocalhost%3A3000%2F对应http://localhost:3000/）。

4. 使用微软官方MSAL.js库 #

微软提供的MSAL.js库专为SPA设计，已封装完整的OAuth2授权码流实现，自动处理弹窗/跳转、CORS、令牌存储与刷新等细节，彻底避免手动实现的潜在问题。

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