在 Angular 中使用 MSAL 和在 WebAPI 中使用 JWT Auth 时 API 请求触发 CORS 错误

Posted 2023-03-10

【中文标题】在 Angular 中使用 MSAL 和在 WebAPI 中使用 JWT Auth 时 API 请求触发 CORS 错误

【英文标题】：API request triggering CORS error when using MSAL in Angular and JWT Auth in WebAPI

【发布时间】：2020-10-21 21:08:01

【问题描述】：

我有一个 Angular 9 应用程序，我在其中启用了 MSAL，并使用我的 Azure 详细信息对其进行了配置。 基于此https://www.npmjs.com/package/@azure/msal-angular

还在 .NET Core Web API 中（在 Azure 中的同一个 AD 下）我设置了 JWT 身份验证

        services.AddAuthentication(AzureADDefaults.AuthenticationScheme)
      .AddAzureAD(options => Configuration.Bind("AzureAd", options))
      .AddJwtBearer("AzureAd", options =>
      
          options.Audience = Configuration.GetValue<string>("AzureAd:Audience");
          options.Authority = Configuration.GetValue<string>("AzureAd:Instance")
          + Configuration.GetValue<string>("AzureAd:TenantId");
          options.TokenValidationParameters = new Microsoft.IdentityModel.Tokens.TokenValidationParameters()
          
              ValidIssuer = Configuration.GetValue<string>("AzureAd:Issuer"),
              ValidAudience = Configuration.GetValue<string>("AzureAd:Audience")
          ;

      );

所以在我的 App 根组件 nginit 中我调用了这个

this.authService.loginPopup();

哪个弹出登录，我根据这个日志登录成功

client:52 [WDS] 启用实时重新加载。 app.component.ts:44 MSAL 日志记录：2020 年 7 月 1 日星期三 11:49:44 GMT:e60fcd4e-5e4a-469d-a023-7bafc05a799a-1.3.2-Info 处理来自重定向响应的回调 app.component.ts:44 MSAL 日志记录：2020 年 7 月 1 日，星期三 11:49:44 GMT：e60fcd4e-5e4a-469d-a023-7bafc05a799a-1.3.2-信息 状态状态：true；请求类型：登录 app.component.ts:44 MSAL 日志记录：2020 年 7 月 1 日，星期三 11:49:44 GMT：e60fcd4e-5e4a-469d-a023-7bafc05a799a-1.3.2-信息状态正确 app.component.ts:44 MSAL 日志记录：2020 年 7 月 1 日，星期三 11:49:44 GMT：e60fcd4e-5e4a-469d-a023-7bafc05a799a-1.3.2-信息片段具有 id 令牌 app.component.ts:44 MSAL 日志记录：2020 年 7 月 1 日，星期三 11:49:44 GMT：e60fcd4e-5e4a-469d-a023-7bafc05a799a-1.3.2-Info 关闭弹出窗口

此外，由于应用程序模块中的 HTTP_INTERCEPTOR 我相信每个请求都会附加身份验证。

  
    provide: HTTP_INTERCEPTORS,
    useClass: MsalInterceptor,
    multi: true
  

我的期望是因为身份验证发生在客户端，因此它将令牌带到 API，并且由于 JWT 在服务器中启用，服务器永远不会尝试进行身份验证。但是根据我得到的CORS错误，我认为API也尝试登录（我错了吗？）。

所以我做错了什么或者我错过了什么

这是 CORS 错误

在 'https://login.microsoftonline.com/2f57b6c4-17e4-4965-ac1a-85ccccbe6c4a/oauth2/v2.0/authorize?client_id=fc01c08e-a25b-4108-bddc-e5edab6b3436&redirect_uri=https% 访问 XMLHttpRequest 3A%2F%2Flocalhost%3A44331%2Fsignin-oidc&response_type=id_token&scope=openid%20profile&response_mode=form_post&nonce=637292009854310829.MGUyMjc1NzMtMDhjNi00O&x-client-SKU=ID_NETSTANDARD2_0&x-client-ver=5.50来自https://'direct.来自 'http://localhost:4200' 的 api/kip') 已被 CORS 策略阻止：请求的资源上不存在 'Access-Control-Allow-Origin' 标头。

【问题讨论】：

我对你的帖子有点困惑——你有 CORS 问题还是身份验证问题？您能否向我们提供您遇到的错误？

老实说，我错过了指定..我刚刚更新了问题，最后出现了 CORS 错误。对不起..

【参考方案1】：

设置 MSAL 可能非常棘手。请根据官方文档检查您是否满足所有要求（甚至还有一个 Angular 项目供您检查）-https://docs.microsoft.com/en-us/samples/azure-samples/active-directory-javascript-singlepageapp-angular/active-directory-javascript-singlepageapp-angular/。

在 Azure 中正确设置服务也很重要 - 确保在 localhost 的配置中设置 redirectURIs（查看此问题了解更多信息 - https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/1199#issuecomment-579882996）