WEBAPI CORS Errors after Authentication update

Question

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.

Answer 1

You can configure CORS in portal if you don't want to change your api code any more.

For more details, you can read my answer in another post.

Error when trying to connect to API in Azure but origin is allowed

Answer 2

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);