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
2 Answer(s)
-
0
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; } }``` -
0
This worked perfectly! Thanks!
