CORS policy: header field is not allowed for custom header

I have an angular app that calls a backend in .net core. There is middleware that, in one instance, needs to redirect back to the angular app. The angular app adds a custom header field and, only in the instance of the middleware redirect, does this error occur. In other words, if I were to redirect form a traditional controller this error does not happen.

In the backend, within the startup.cs file:

app.UseCors(options => {
  options.AllowAnyOrigin();
  options.AllowAnyHeader();
  options.AllowAnyMethod();
});
...
app.UseMiddleware<LmsApiAuthorizationMiddleware>();

The LmsApiAuthorizationMiddleware.cs

if (httpContext.Request.Path.ToString().Contains("api/lms"))
            {
                if (httpContext.Request.Headers.ContainsKey("QT-OBO"))
                {
                    // Do we have a session for this user
                    ...
                    if (activeSession != null)
                    {
                        oboSession = JsonConvert.DeserializeObject<OnBehalfOfApiSession>(activeSession);
                    }
                    ...
                    )
                    {
                        try
                        {
                            ...
                        }
                        catch (Exception ex)
                        {
                            // We failed to use the refresh, so start over with auth.
                            httpContext.Response.Redirect($"{uiUrl}auth/initialize?obo={user.Subject}");
                            return;
                        }
                    }
                }
            }

The redirect occurs at httpContext.Response.Redirect().

And then, within the angular app, I get this

Access to XMLHttpRequest at ‘http://localhost:4200/auth/initialize?obo=d0daa9d2-314e-4492-8b96-f29a673fe5ee’ (redirected from ‘https://localhost:5001/api/lms/course/36/quizzes’) from origin ‘http://localhost:4200’ has been blocked by CORS policy: Request header field qt-obo is not allowed by Access-Control-Allow-Headers in preflight response.

The QT-OBO header field is set by angular on http calls…

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (req.url.indexOf(this.API_URL) !== -1) {
      const oboService = this.inj.get(OnBehalfOfService);
      if (oboService.onBehalfOfValue !== undefined) {
        req = req.clone({
          setHeaders: {
            'QT-OBO': oboService.onBehalfOfValue
          }
        });
      }
    }

    return next.handle(req);
  }
}

Again, the redirect works fine if I just do it from a controller, e.g. return Redirect(). However, it makes most sense for this application to initiate that redirect before getting to the controllers if we don’t have the necessary information.

From what I’ve read, this is an issue with the backend API but the code returns from the API so I think it’s a configuration with the front end that needs to be done.

How do I make this work?

Source: Angular Questions