在角度应用程序中添加 Azure AD 身份验证（使用 MSAL）时出现 CORS 问题

Question

I'm currently developing an Angular 8 Frontend & asp.net core 3.1 backend application where I use Azure AD to authenticate users.

The flow of the application goes as followed.

The user tries to login or access a route that is protected/guarded in my Angular app so the user gets redirected to the Azure login page. So now the Angular app has the required token to send along to my asp backend. My backend receives the token along with an API request. backend checks token & responds to the API call.

PROBLEM

When making the API call, I get redirected to the login page, but after logging in. I get this error .

After I log in, I receive a valid token from azure via the URL: http://localhost:4200/#id_token= << TOKEN >>

These are the headers from the request found in the network tab in my browser.

Not sure about this, but I don't see any tokens passed in those headers. Although I'm using HTTP INTERCEPTORS to add the token to my headers of each request. Can this be the problem?

MY CODE

Backend

Startup.cs

    // This method gets called by the runtime. Use this method to add services to the container.
    public void ConfigureServices(IServiceCollection services)
    {
        //other config services


        services.AddAuthentication(AzureADDefaults.BearerAuthenticationScheme)
            .AddAzureADBearer(options => Configuration.Bind("AzureActiveDirectory", options));

        services.AddCors((opt =>
        {
            opt.AddPolicy("FrontEnd", builder => builder
                            .WithOrigins("http://localhost:4200")
                            .AllowAnyMethod()
                            .AllowAnyHeader()
                            .AllowCredentials()
                        );
        }));
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        //other configurations

        app.UseAuthentication();
        app.UseAuthorization();

        app.UseCors("FrontEnd");

        app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllers();
        });


    }
}

Simple API

[Route("api/[controller]")]
[ApiController]
[EnableCors("FrontEnd")]
[Authorize]
public class GezinnenController : ControllerBase
{
    //Constructor & properties

    // GET: api/Gezinnen
    [HttpGet]
    public async Task<ActionResult<IEnumerable<GezinForLijstDto>>> GetGezinnen()
    {
        var gezinnen = await _unitOfWork.GezinRepo.GetAllAsync(null, "Personen,Gemeente");

        var gezinnenForLijstDto = _mapper.Map<IEnumerable<GezinForLijstDto>>(gezinnen);

        return Ok(gezinnenForLijstDto);
    }

Angular

App.module.ts

  import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
  import { MsalModule, MsalInterceptor } from '@azure/msal-angular';
  //other imports

  export const protectedResourceMap:
     [string, string[]][] = [['https://localhost:5001/api/gezinnen', ['api://<<API Client ID>>/api-access']] ];

  @NgModule({
     declarations: [
        ...
     ],
     imports: [
        ...
        MsalModule.forRoot({
           clientID: '<<Frontend Client ID>>',
           authority: 'https://login.microsoftonline.com/<<API tenant ID>>',
           consentScopes: [ 'user.read', 'api://<<API Client ID>>/api-access' ],
           protectedResourceMap: protectedResourceMap }),
     ],
     providers: [
        {
        provide: HTTP_INTERCEPTORS,
        useClass: MsalInterceptor,
        multi: true
     }],
     bootstrap: [
        AppComponent
     ]
  })
  export class AppModule { }

Can someone help me fix this? I'm starting to get desperate :-)

Answer 1

Workround:

1.Modify the server to add the header Access-Control-Allow-Origin: * to enable cross-origin requests from anywhere (or specify a domain instead of *). This should solve your problem.

2.Using Angular proxy

For more details, you could refer to this article .

Answer 2

要解决 CORS 错误，在您的 startup.cs 中，您能否将 app.UseCors("FrontEnd") 移动到 app.UseAuthentication() 上方