使用Angular-msal2携带Azure idtoken请求API出现CORS错误如何解决

根因说明 #

你遇到的CORS错误并非Web API未配置跨域规则导致：当请求未携带有效Access Token时，Azure App Service的身份验证模块会自动将请求重定向到Azure AD登录端点，而该登录端点本身不支持CORS请求，因此触发了跨域拦截报错。

步骤1：配置MSAL Angular自动附加Token的拦截器 #

按照如下配置修改你的app.module.ts即可开启MSAL的自动附加Token能力，无需手动处理请求头：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { MsalModule, MsalInterceptor, MSAL_INSTANCE, MSAL_INTERCEPTOR_CONFIG, MsalInterceptorConfiguration, InteractionType } from '@azure/msal-angular';
import { PublicClientApplication, Configuration } from '@azure/msal-browser';

// 你的MSAL基础配置，保留你之前的配置即可
export function msalInstanceFactory(): PublicClientApplication {
  const msalConfig: Configuration = {
    auth: {
      clientId: '<你的Angular前端应用注册的客户端ID>',
      authority: 'https://login.microsoftonline.com/<你的Azure AD租户ID>',
      redirectUri: '<你的前端回调地址>'
    }
  };
  return new PublicClientApplication(msalConfig);
}

// 拦截器规则配置，告诉MSAL哪些请求需要自动加Token
export function msalInterceptorConfigFactory(): MsalInterceptorConfiguration {
  return {
    interactionType: InteractionType.Redirect, // 可根据你的登录逻辑替换为InteractionType.Popup
    protectedResourceMap: new Map([
      // 键为匹配的API地址规则，值为该API需要申请的权限scope，可在Azure AD的API应用注册「暴露API」页面获取
      ['https://wgceworkflow-as.azurewebsites.net/api/*', ['api://<你的API应用注册的客户端ID>/access_as_user']]
    ])
  };
}

@NgModule({
  imports: [BrowserModule, MsalModule.forRoot()],
  providers: [
    // 注册MSAL拦截器，接管所有HTTP请求
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MsalInterceptor,
      multi: true
    },
    {
      provide: MSAL_INSTANCE,
      useFactory: msalInstanceFactory
    },
    {
      provide: MSAL_INTERCEPTOR_CONFIG,
      useFactory: msalInterceptorConfigFactory
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

步骤2：确认API端配置 #

• 登录Azure门户，进入对应Web API的App Service页面，在「CORS」设置中添加你的Angular前端域名（本地测试时要加http://localhost:4200，生产环境加线上前端域名，不要直接用*通配符）
• 确认Azure AD中，你的前端应用注册已经申请并被授予了API的access_as_user权限
• 如果你启用了Azure App Service自带的易验证功能，需在API的身份验证设置中，将前端应用的客户端ID添加到允许的受众列表中，避免Token验证失败

步骤3：验证请求 #

配置完成后你原有请求代码不需要做任何修改，MSAL拦截器会自动静默获取有效Access Token，附加到请求的Authorization头中，不会再触发到登录页的重定向，CORS错误即可解决：

this.http.get("https://wgceworkflow-as.azurewebsites.net/api/demo/all")
   .subscribe(r=>console.log(r));

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