azure – Mobile safari: angular http call to .netcore backend – 0 Unknown error

I have an angular application hosted in a web app in azure. It was created using the template in VS with a .Net Core back end. When the application is deployed it works fine on desktops, windows and macOS.

But on mobile safari I keep getting errors when trying to make an api call to fetch a token using azure b2c. The .net core code makes the call in order to get the token and return any other associated data from the database.

I’ve added application insights logging and get the following error:

{"headers":{"normalizedNames":{},"lazyUpdate":null,"headers":{}},"status":0,"statusText":"Unknown Error","url":"**********.azurewebsites.net/Auth/Token","ok":false,"name":"HttpErrorResponse","message":"Http failure response for ***********.azurewebsites.net/Auth/Token: 0 Unknown Error","error":{"isTrusted":true}}

This causes my application to go through a looping mechanism from my error page to try and authenticate. After searching endlessly on the web, I’ve ensured CORS is configured correctly and headers are set. But I’m really not sure where to go next.

.net core start up code:

 public void ConfigureServices(IServiceCollection services)
        {
            services.AddApplicationInsightsTelemetry(Configuration("ApplicationInsights:InstrumentationKey") ?? string.Empty);

            ConfigureIoC(services);

            MapperConfiguration mappingConfig = new MapperConfiguration(mc =>
            {
                mc.AddProfile(new AutoMapperConfig());
            });
            services.AddSingleton(mappingConfig.CreateMapper());

            services.AddCors();

            services.AddControllersWithViews(options =>
            {
                options.RespectBrowserAcceptHeader = true;
            }).AddNewtonsoftJson();

            //Azure AD - B2C
            ConfigureAuth(services);
            
            services.AddSpaStaticFiles(configuration =>
            {
                configuration.RootPath = "ClientApp/dist";
            });
        }
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
                IdentityModelEventSource.ShowPII = true;
            }
            else
            {
                app.UseExceptionHandler("/Error");
                app.UseHsts();
            }

            app.UseHttpsRedirection();
            app.UseStaticFiles();
            if (!env.IsDevelopment())
            {
                app.UseSpaStaticFiles();
            }

            app.UseRouting();
            app.UseCors(builder => {
                builder.AllowAnyOrigin();
                builder.AllowAnyMethod();
                builder.AllowAnyHeader();
            });
            app.UseAuthentication();
            app.UseAuthorization();
            
            app.UseMiddleware<ErrorHandlingMiddleware>();
            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllerRoute(
                    name: "default",
                    pattern: "{controller}/{action=Index}/{id?}");
            });

            app.UseSpa(spa =>
            {
                spa.Options.SourcePath = "ClientApp";

                if (env.IsDevelopment())
                {
                    spa.UseAngularCliServer(npmScript: "start");
                    spa.Options.StartupTimeout = TimeSpan.FromSeconds(200);
                }
            });
        }
    }

Angular http intercepter code:

 intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpSentEvent | HttpHeaderResponse | HttpProgressEvent | HttpResponse<any> | HttpUserEvent<any> | any> {
    return next.handle(this.addTokenToRequest(request, this.authService.tokenSubject.value)).pipe(
      tap(res => {
        if (res instanceof HttpResponse) {
          this.decreaseRequests();
        }
      }),
      catchError(err => {
        this.decreaseRequests();
      
        if (err instanceof HttpErrorResponse) {
          switch ((<HttpErrorResponse>err).status) {
            case 401:
              this.authService.logOut();
              return;
              //return this.handle401Error(request, next);
            case 200:
              return;
            default:
              return this.handleError(err);
          }
        } else {
          this.logger.logTrace(`Interceptor: Error - ${err}`);
          return throwError(err);
        }
      })
    );
  };

  private decreaseRequests() {
    this.totalRequests--;
  }

  private addTokenToRequest(request: HttpRequest<any>, token: string): HttpRequest<any> {
    return request.clone({
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
        Accept: 'application/json',
        Authorization: 'Bearer ' + token
      })
    });
  }

When running fiddler, this is my request:
fiddler-image