Angular调用Azure Active Directory /authorize接口遇CORS错误求解决

你遇到的问题核心是错误的调用方式：OAuth2授权码流程的/authorize端点设计上就不是用来通过前端AJAX请求调用的，微软不会为这个端点配置CORS允许前端域名跨域请求，这是安全设计的一部分。

正确的实现方式 #

1. 不要用HttpClient直接调用/authorize端点，而是引导用户跳转至该URL完成认证：

   • 在Angular中，你可以通过window.location.href跳转到授权URL，或者使用官方的MSAL Angular库来处理整个认证流程（推荐）。

2. 修正重定向URI类型：

   • Angular是单页应用，应该在Azure AD应用注册中配置SPA类型的重定向URI，而非Web类型。之前配置SPA出错大概率是URI格式问题（比如结尾缺少斜杠，或者与实际前端地址不匹配），确保http://localhost（或你的前端部署地址）正确添加为SPA类型的重定向URI。

3. 使用MSAL Angular简化实现：

   • 安装依赖：npm install @azure/msal-angular @azure/msal-browser
   • 初始化MSAL模块，在app.module.ts中配置：

     import { MsalModule, MsalService, MsalGuard } from '@azure/msal-angular';
     import { PublicClientApplication } from '@azure/msal-browser';
     
     @NgModule({
       imports: [
         MsalModule.forRoot(new PublicClientApplication({
           auth: {
             clientId: '你的clientId',
             authority: 'https://login.microsoftonline.com/你的tenantId',
             redirectUri: 'http://localhost'
           }
         }))
       ],
       providers: [MsalService, MsalGuard]
     })
     export class AppModule { }
     

   • 在组件中触发登录：

     constructor(private msalService: MsalService) {}
     
     login() {
       this.msalService.loginRedirect({
         scopes: ['https://outlook.office.com/IMAP.AccessAsUser.All', 'offline_access']
       });
     }
     

   • MSAL会自动处理跳转认证、获取授权码、兑换token的流程，完全规避CORS问题。

为什么直接浏览器访问正常？ #

浏览器直接访问属于用户主动导航，不属于AJAX跨域请求，不会触发CORS预检机制；而Angular中用HttpClient调用是跨域AJAX请求，浏览器会发起OPTIONS预检请求，微软的/authorize端点不允许这种请求，因此返回CORS错误。

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