WEBAPI CORS Errors after Authentication update

Viewed 247

I have an Angular application running in Azure that connects to my WEBAPI also running in Azure. Seperate websites. Everything works fine, but recently in my API code I started getting this warning:

Severity    Code    Description Project File    Line    Suppression State
Warning CS0618  'AzureADAuthenticationBuilderExtensions.AddAzureAD(AuthenticationBuilder, Action<AzureADOptions>)' is obsolete: 'This is obsolete and will be removed in a future version. Use AddMicrosoftWebApiAuthentication from Microsoft.Identity.Web instead. See https://aka.ms/ms-identity-web.'   MExBrightsign.API   D:\Repos\WHQMuseums\MExBrightsign\CMS\MExBrightsign.API\Startup.cs  53  Active

Currently I have the following in my startup.cs file:

    services
        .AddAuthentication("Azure")
        .AddPolicyScheme("Azure", "Authorize AzureAd or AzureAdBearer", options =>
        {
            options.ForwardDefaultSelector = context =>
            {
                var authHeader = context.Request.Headers["Authorization"].FirstOrDefault();
                if (authHeader?.StartsWith("Bearer") == true)
                {
                    return JwtBearerDefaults.AuthenticationScheme;
                }
                return AzureADDefaults.AuthenticationScheme;
            };
        })
        .AddJwtBearer(opt =>
        {
            opt.Audience = Configuration["AAD:ResourceId"];
            opt.Authority = $"{Configuration["AAD:Instance"]}{Configuration["AAD:TenantId"]}";
        })
        .AddAzureAD(options => Configuration.Bind("AzureAd", options));

If I change the line: .AddAzureAD(options => Configuration.Bind("AzureAd", options));

to .AddMicrosoftIdentityWebApi(Configuration.GetSection("AzureAd"));

I get CORS errors on all my calls from my Angular applications.

Nothing else was changed.

What else do I need to do to NOT get the CORS errors. For now, I am just leaving the obsolete call, but I would like to find a solution before the call is removed.

Thanks for your help.

EDIT: Additional information Jason Pan's comment did not help me, but it did get me thinking. I had already configured Azure App Service CORS. I realized that I never actually deployed to Azure and saw the CORS errors. I was running locally. I made the 1 line change, and all Angular calls to the WEBAPI returned with CORS errors. Note that I had the following in the startup.cs file of my WEBAPI:

    var origins = Configuration.GetSection("AppSettings:AllowedOrigins").Value.Split(",");
    services.AddCors(o => o.AddPolicy(mexSpecificOrigins, builder =>
    {
        builder.WithOrigins(origins)
               .AllowAnyMethod()
               .AllowAnyHeader()
               .AllowCredentials()
               .SetIsOriginAllowed((host) => true);
    }));

Here is the appsettings.json:

  "AppSettings": {
    "EnvironmentName": "LOCAL",
    "AllowedOrigins": "http://localhost:4200"
  },

So, I when running locally, I have CORS configured only in the startup.cs, but in Azure, I have both in startup.cs and Azure CORS configuration.

The thing bugging me is that I only changed the 1 line. What is the difference with the new calls. I assume it adds additional security. I will try deploying to Azure, and see if the CORS errors continue. If that works, then I only need to worry about local development.

2 Answers

Add to configure metod of startup.cs (after app.UseRouting() ) :

  app.UseCors(mexSpecificOrigins);

and change your origins to this:

var origins = Configuration["AppSettings:AllowedOrigins"];

or change AllowedOrigins:

"AllowedOrigins": ["http://localhost:4200"]

and try to remove:

 .SetIsOriginAllowed((host) => true);
Related