Authorization header not send to the backend with angular 13

[anandjaisy]

I am using swagger-ui with angular 13

Package.json

"swagger-ui": "^5.11.8"

HTML

Angular component

import SwaggerUI from 'swagger-ui';
import { DeveloperApikeyRegisterStore } from '../developer-api-key-register/developer-api-key-register.store';

@Component({
  selector: 'app-developer-api-doc',
  templateUrl: './developer-api-doc.component.html'
})
export class DeveloperApiDocComponent extends ComponentStore<DeveloperApiApiDocState> implements AfterViewInit {
  @ViewChild('swaggerContainer') swaggerContainer: ElementRef;
  private _baseUrl: string = "http://localhost:5270/";
  constructor(private developerApikeyRegisterStore: DeveloperApikeyRegisterStore) {
    super({ authorizationUrl: '' });
    this.developerApikeyRegisterStore.getSwaggerBaseUrl();
  }

  ngAfterViewInit() {
	this.setupSwagger();
  }
  setupSwagger() {
    SwaggerUI({
      url: `${this._url}/swagger/v1/swagger.json`,
      domNode: this.swaggerContainer?.nativeElement,
      deepLinking: false,
      presets: [
        SwaggerUI.presets.apis
      ],
    });
  }
}

It generates the swagger UI. However Authorization header was not sent to the backend, I am using asp.net core. One of the end-point with try-it-now button

Back-end code

The authorization header is not present, however, with the Actual swagger the authorization header is present.

The CURL that is generated from Swagger

curl -X 'GET' \
  'http://localhost:5270/assessments-api/1.0/assessments' \
  -H 'accept: application/json;odata.metadata=minimal;odata.streaming=true' \
  -H 'Authorization: Bearer eyJhcyIsImF1ZCI6IkxlZ2FsUmVnVGVjaCJ9._FVlHTslRRAiZ23e-X00nmxxd9wDuujczeykvX_jEW0'

If I import in POSTMAN it works fine. I can see one warning on the network tab Provisional headers warning, however I have disabled the cache as well

[anandjaisy]

It was not an issue, I had made a wrong configuration on the asp.net core app.

The issue for me was

Before

app.UseMiddleware<UnitOfWorkForOdataEndpointsMiddleware>();
app.UseCors(CorsPolicyName);

After

app.UseCors(CorsPolicyName);
app.UseMiddleware<UnitOfWorkForOdataEndpointsMiddleware>();