Remove _tenant header from REST requests. #4510

rmosley@yprime.com created 2 years ago

I've recently updated our angular app to use Auth0 for authentication and authorization, almost everything is working so far. The issue I'm having is when signed into a non-host tenant a '_tenant' header gets automatically added to all API requests.

When the '_tenant' header is included to Auth0's ./well-known/openid-configuration endpoint the error response is 'Request header field __tenant is not allowed by Access-Control-Allow-Headers in preflight response This is only occurring when signed into a tenant, the host tenant does not include this header and does not receive this error response.

Is there a way to exclude the '_tenant' header to this, and other Auth0 endpoint?

Full error message: Access to XMLHttpRequest at 'https://{removed}/.well-known/openid-configuration' from origin 'https://localhost:4200' has been blocked by CORS policy: Request header field __tenant is not allowed by Access-Control-Allow-Headers in preflight response.

ABP Framework version: v6.0.1
UI type: Angular
DB provider: EF Core MSSQL
Tiered (MVC) or Identity Server Separated (Angular): Angular

muhammedaltug created 2 years ago

Hello,

You can do it with overring ApiInterceptor.

Provide your service in app.module.ts

import { NgModule } from '@angular/core';
import { ApiInterceptor } from '@abp/ng.core';
@NgModule({
    providers: [
        //...other Providers
         {
              provide: ApiInterceptor,
              useClass: YourApiInterceptor
        },
    ]
})
export class AppModule{}

import { HttpHandler, HttpRequest } from '@angular/common/http';
import { Inject, Injectable } from '@angular/core';
import { OAuthService } from 'angular-oauth2-oidc';
import { finalize } from 'rxjs/operators';
import {
  SessionStateService,
  HttpWaitService,
  TENANT_KEY,
} from '@abp/ng.core';

@Injectable({
  providedIn: 'root',
})
export class YourApiInterceptor  {
  constructor(
    private oAuthService: OAuthService,
    private sessionState: SessionStateService,
    private httpWaitService: HttpWaitService,
    @Inject(TENANT_KEY) private tenantKey: string,
  ) {}

  intercept(request: HttpRequest<any>, next: HttpHandler) {
    this.httpWaitService.addRequest(request);
    const newRequest = request.clone({
          setHeaders: this.getAdditionalHeaders(request),
        });

    return next
      .handle(newRequest)
      .pipe(finalize(() => this.httpWaitService.deleteRequest(request)));
  }

  getAdditionalHeaders(request: HttpRequest<any>) {
    const existingHeaders = request.headers
    const headers = {} as any;

    const token = this.oAuthService.getAccessToken();
    if (!existingHeaders?.has('Authorization') && token) {
      headers['Authorization'] = `Bearer ${token}`;
    }

    const lang = this.sessionState.getLanguage();
    if (!existingHeaders?.has('Accept-Language') && lang) {
      headers['Accept-Language'] = lang;
    }

    const tenant = this.sessionState.getTenant();
    // add your logic following condition
    if (!existingHeaders?.has(this.tenantKey) && tenant?.id && ) {
      headers[this.tenantKey] = tenant.id;
    }

    headers['X-Requested-With'] = 'XMLHttpRequest';

    return headers;
  }
}```