change - Angular 6: ¿Por qué falta el token de portador en la compilación de producción?(Funciona bien en la construcción de desarrollo)

change title angular 4

Question

Estoy usando Angular 6 con un Interceptor HTTP configurado para aplicar el token de portador a las solicitudes salientes.

• En la compilación dev ( ng serve ), el token se aplica y todo funciona bien. :-)

• En la compilación de producción ( ng serve --prod ) la solicitud se envía sin el token de portador. :-(

En la compilación prod, he verificado que el encabezado se está aplicando, volcando los encabezados en la consola después de aplicarlos.

No tengo idea de por qué están excluidos de la solicitud http.

No hay diferencias en environment archivos de mi environment .

¿Qué más debería estar mirando?

¿Qué puedo hacer para arreglar esto?

Al principio pensé que esto era un problema entre mi entorno local y mi entorno de prueba, pero luego intenté ejecutar ng serve --prod localmente y vi los mismos resultados.

Todo lo que hay que decir, todo es idéntico, excepto uno que es una compilación de producción y el otro una compilación de desarrollo.

JWT-interceptor

import { Injectable } from ''@angular/core'';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from ''@angular/common/http'';
import { Observable } from ''rxjs'';

@Injectable()
export class JwtInterceptor implements HttpInterceptor {
    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        // add authorization header with jwt token if available
        let currentUser = JSON.parse(localStorage.getItem(''currentUser''));

        if (currentUser && currentUser.token) {
            request = request.clone({
                setHeaders: {
                    Authorization: `Bearer ${currentUser.token}`
                }
            });
            console.log(''headers:'', request.headers); // <---- I can see headers in console output
        }

        return next.handle(request);
    }
}

Esto es lo que veo en la consola:

app.module.ts

import { HttpClientModule, HttpClient, HttpInterceptor } from ''@angular/common/http'';
import { BrowserModule } from ''@angular/platform-browser'';
import { NgModule } from ''@angular/core'';
import { HTTP_INTERCEPTORS } from ''@angular/common/http'';
import { PortalModule } from ''@angular/cdk/portal'';
import { FormsModule, ReactiveFormsModule } from ''@angular/forms'';

import { JwtInterceptor } from ''./jwt-interceptor'';
import { ENV } from ''../environments/environment'';
import { AppComponent } from ''./app.component'';
import { AppRoutingModule } from ''./app-routing.module'';
... 
import { myApiService } from ''./services/my-api.service'';
import { myModalComponent } from ''./_components/my-modal/my-modal.component'';
import { myModalService } from ''./services/my-modal.service'';

import { AngularLaravelEchoModule, PusherEchoConfig, EchoInterceptor } from ''angular-laravel-echo/angular-laravel-echo'';

export const echoConfig: PusherEchoConfig = {
    userModel: ''App.User'',
    notificationNamespace: ''App//Notifications'',
    options: {
        broadcaster: ''pusher'',
        key: ENV.pusherConfig.key,
        cluster: ENV.pusherConfig.cluster,
        host: ENV.apiRoot,
        authEndpoint: ENV.apiRoot + ''/broadcasting/auth'',
    }
};

@NgModule({
    declarations: [
        AppComponent,
        ...
    ],
    imports: [
        BrowserModule,
        HttpClientModule,
        BrowserModule,
        AppRoutingModule,
        FormsModule,
        ReactiveFormsModule,
        PortalModule,
        AngularLaravelEchoModule.forRoot(echoConfig)
    ],
    providers: [
        myApiService,
        myModalService,
        {
            provide: HTTP_INTERCEPTORS,
            useClass: JwtInterceptor,
            multi: true,
        },
        {
            provide: HTTP_INTERCEPTORS,
            useClass: EchoInterceptor,
            multi: true
        }
    ],
    bootstrap: [AppComponent],
    entryComponents: [ 
        myModalComponent
    ]
})

export class AppModule {
}

Answer 1

¿Puedes intentar configurar el encabezado en la llamada api real? Me gusta, ejemplo:

put(path: string, body: Object = {}): Observable<any> {
return this.http.put(`${environment.api_url}${path}`, body, { headers: 
     this.setHeaders() })
     .map((res: Response) => {
        return res;
     });
}

private setHeaders(): HttpHeaders {
    const headersConfig = {
      ''Content-Type'': ''application/json'',
      ''Accept'': ''application/json'',
      ''Authorization'': ''Bearer '' + this.oauthService.getAccessToken()
    };
    return new HttpHeaders(headersConfig);
}

Y el interceptor tendrá justo el

request.clone() 

Answer 2

Escribí esta aplicación en StackBlitz, y funciona bien cuando la ejecuto localmente con ng serve --prod .

https://stackblitz.com/edit/angular-yzckos

Descárguelo y ejecútelo para ver si aún undefined está undefined en la pestaña de su red. Si puedes ver que el encabezado se envía correctamente, entonces definitivamente hay algo gracioso en tu código.

Intente bramido

1- intente ejecutar `ng serve --port = aDifferentPort // como 2098

Quizás haya algo corriendo en ese puerto y enviando un encabezado de autenticación.

2- Prueba con AOT falso, no puedo pensar por qué eso causaría algún problema.

3- Asegúrate de que tu navegador no tenga ninguna extensión que anule el encabezado Auth o prueba otros navegadores

4- Apague sus otros interceptores HTTP, tal vez uno de ellos haga algo inesperado

5- Cambie el nombre del encabezado de Authorizaion a MyAuthorization , vea si aún no está definido, si no lo hace, entonces se está anulando por algo, verifique su package.json y asegúrese de que no esté ejecutando nada más en El servicio de producción.

6- Apague el JwtInterceptor completo e intente adjuntar el encabezado de autorización a su solicitud HTTP , JwtInterceptor si aún undefined está undefined .

7- Si ninguno ayudó, realmente necesita enviarnos más código :)

Answer 3

He tenido casi el mismo problema en el entorno de producción donde el servidor ignora completamente el encabezado de Authorization . Angular 6 envía el encabezado de Authorization correctamente, pero el servidor se elimina por completo (debido a la mayoría de los servidores de producción, la configuración de seguridad del alojamiento compartido). Sé que esta podría no ser la respuesta que estás buscando. Pero, solo quería darte una pista.

Así que, finalmente, para que funcionara, tuve que usar un parámetro de encabezado diferente, como Php-Auth-Digest , como este.

request = request.clone({
    setHeaders: {
      "Php-Auth-Digest": `Bearer ${currentUser.token}`,
    }
  });

Como solución, intente cambiar el nombre de su parámetro de encabezado.

¡Aclamaciones!

Answer 4

Prueba esto

if (currentUser && currentUser.token) {
        request = request.clone({
            setHeaders: {
                Authorization: `Bearer ${currentUser.token}`
            }
        });
        console.log(''headers:'', request.headers); // <---- I can see headers in console output
    }
if (typeof $ != ''undefined'') {
    $.ajaxSetup({
      beforeSend: function (xhr: any) {
        xhr.setRequestHeader(''Authorization'', ''Bearer '' + currentUser.token);
      }
    });
  }
    return next.handle(request);

Answer 5

Puede intentar clonar los encabezados manualmente en su método request.clone() . Esto es lo que funciona para mí:

export class HttpHeaderInterceptor implements HttpInterceptor {
  // ...
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // ...
    const clonedRequest = req.clone({ 
      headers: req.headers.set(''Authorization'', ''Bearer '' + currentUser.token) 
    });
    return next.handle(clonedRequest).pipe(
      catchError(err => { /* Error handling here */ })
    );
  }
}

Espero que esto ayude un poco :-)

Answer 6

Tengo una idea acerca de esto, pero no estoy seguro de que funcione o no, por favor verifique

HttpHeaders son mutables, si agrega cualquier encabezado, actualiza el existente y agrega el valor, por lo que esto me causa un problema al agregar un encabezado, así que siga el siguiente método:

private getHeaders(): HttpHeaders {
    let headers = new HttpHeaders();
    headers = headers.append("Content-Type", "application/json");
    return headers;
  }

Desde entonces, agregué los nuevos encabezados, asigné el objeto al objeto original y devolví el objeto.

Pero en su caso, puede usar el mismo método anterior en su HttpInterceptor o tratar de cambiar los headers setheaders con headers como se muestra a continuación.

if (currentUser && currentUser.token) {
            request = request.clone({
                headers: new HttpHeaders({
                    Authorization: `Bearer ${currentUser.token}`
                })
            });
            console.log(''headers:'', request.headers); 
        }

Estoy seguro de que esto resolverá tu problema en ambas versiones: prueba y hazme saber si no funciona. Espero que funcione gracias, ¡feliz codificación!