Как может локально обслуживаемый SPA аутентифицироваться с использованием WebAPI в Azure и избежать ошибки CORS?

Question

У меня есть SPA (узел, npm, магистраль) с. NET Core 3.1 WebAPI backend. SPA и WebAPI размещены в Azure.

Но Разработчики внешнего интерфейса имеют SPA, работающий локально (т.е. webpack-dev-server), а WebAPI работает в Azure.

Вот startup.cs для WebAPI.

1. Все контроллеры имеют [Authorize]
2. Обратите внимание на вызов app.UseStaticFiles, который будет обслуживать файлы SPA в производстве. Но для локальной разработки файлы SPA обслуживаются локальным сервером разработки (веб-пакет).
3. Вызов services.AddMicrosoftIdentityPlatformAuthentication из Microsoft.Identity.Web

4. Вызов UseProtectFolder из политик авторизации и промежуточного программного обеспечения в ASP. NET 5 (требуется, чтобы все файлы stati c нуждались в аутентификации.)

   public class Startup
   {
   
       public void ConfigureServices(IServiceCollection services)
       {
           services.AddMicrosoftIdentityPlatformAuthentication(Configuration);
           services.AddMvc();
           services.AddCors();
   
           // ... lots of configuration ...
   
       }
   
       public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
       {
           app.UseSession();
           if (env.IsDevelopment())
           {
               app.UseDeveloperExceptionPage();
           }
           else
           {
               app.UseDeveloperExceptionPage(); 
           }
           app.UseCors(builder =>
          builder.AllowAnyOrigin()
         .AllowAnyHeader()
         .AllowAnyMethod());
   
           app.UseDefaultFiles();
   
           app.UseRouting();
   
           app.UseAuthentication();
           app.UseAuthorization();
   
           app.UseEndpoints(endpoints =>
           {
               endpoints.MapControllers();
           });
           app.UseProtectFolder(new ProtectFolderOptions
           {
               Path = "/",
               PolicyName = "Authenticated"
           });
           app.UseStaticFiles(new StaticFileOptions
           {
               OnPrepareResponse = ctx =>
               {
                   const int durationInSeconds = 60 * 24 * 24;
                   ctx.Context.Response.Headers[HeaderNames.CacheControl] =
                       "public,max-age=" + durationInSeconds;
               }
           });
   
       }
   
   }
   

---

Ошибка

При переходе пользователя в SPA http://localhost:8101 в инструментах разработчика браузера отображается следующая ошибка (в Chrome аналогичные ошибки в Edge и Firefox, последние текущие версии).

Access to XMLHttpRequest at 
'https://login.microsoftonline.com/tenant-id/oauth2/v2.0/authorize?client_id=GUID&redirect_uri=https%3A%2F%2Fmy-web-site.azurewebsites.net%2Fsignin-oidc&response_type=id_token&scope=openid%20profile&response_mode=form_post&nonce=xxx&state=xxx&x-client-SKU=ID_NETSTANDARD2_0&x-client-ver=5.5.0.0' 
(redirected from 'http://localhost:8101/config/views/view1/init') from origin 
'http://localhost:8101' has been blocked by CORS policy: 
Response to preflight request doesn't pass access control check: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

---

Что я пробовал

1. Чтобы увидеть, действительно ли CORS проблема, я попытался "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --incognito --disable-web-security безуспешно
2. В Azure, в службе приложений я попытался включить CORS, указав разрешенные источники. Все без успеха. Вот скриншот из Azure -> Службы приложений -> CORS

Azure -> Службы приложений -> CORS

---

Вопрос Для ситуации, когда SPA работает локально, но WebAPI работает в Azure, как заставить работать аутентификацию? Было бы хорошо, если бы в целях разработки аутентификация отключалась.