web-dev-qa-db-fra.com

Angular 5 L'intercepteur HTTP ne détecte pas l'en-tête de réponse (POST)

Je ne parviens pas à obtenir l'en-tête de réponse personnalisé dans l'intercepteur lorsque je l'enregistre dans la console. La console a enregistré l'intercepteur httpResponse

'' Réponse au journal de la console ''

HttpResponse {en-têtes: HttpHeaders, statut: 200, statusText: "OK", ok: vrai,…}

HttpHeaders lazyInit: ƒ () lazyUpdate: null normalizedNames: Map (0) {} proto : Objet ok: vrai statut: 200 statutTexte: "OK" type: 4

Nous avons également ajouté le Access-control-expose-header du côté serveur. Je ne reçois toujours pas la réponse. Pas sûr que je manque quelque chose dans la méthode d'intercepteur.

Méthode d'intercepteur 

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        req = req.clone({
            setHeaders: {
                'Accept': 'application/vnd.employee.tonguestun.com; version=1',
                'Content-Type': 'application/json',
            }
        });

    return next.handle(req)
        .do((ev: HttpEvent<any>) => {
            console.log(ev)
            if (ev instanceof HttpResponse) {
                console.log(ev.headers);
            }
            // return ev;
        })

}

fonction intercepteur

En-tête personnalisé dans l'onglet Réseau

access-control-allow-credentials: true

méthodes d'accès-contrôle-autoriser: GET, POST, OPTIONS

access-control-allow-Origin: *

access-control-expose-headers: jeton d'accès, client, expiration, type de jeton, uid

jeton d'accès: haIXZmNWSdKJqN2by7JH1g

cache-control: max-age = 0, privé, doit revalider

client: j_2dxD7NVMjGeX8BbBuELA

type de contenu: application/json; jeu de caractères = utf-8

expiration: 1525931943

Obtenir des en-têtes personnalisés dans l'onglet Réseau

C'est aussi mon appel de service, ajoute Observer 'réponse' dans l'appel.

Appel de service 

return this.http.post(`${environment.baseUrl}${environment.signup}`, data, {observe: "response"})
  .map(response => response);

appel de service

AppModule.ts 

import { BrowserModule } from '@angular/platform-browser';
   import { NgModule } from '@angular/core';
   import { CommonModule } from '@angular/common';

   import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AppInterceptor } from './services/app-interceptor.service';

import { HomeModule } from './home/home.module'; 
import { SharedModule } from './shared/shared.module';
import { AppRoutingModule } from './app-routing.module';
import { AuthService } from './services/auth.service';
import { AuthGuardService } from './services/auth-guard.service';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    CommonModule,
    HttpClientModule,
    BrowserAnimationsModule,
    HomeModule,
    SharedModule,
    AppRoutingModule,
  ],
  providers: [
    AuthService,
    AuthGuardService,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AppInterceptor,
      multi: true
    },
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Aidez-moi s'il vous plaît. Merci d'avance!

angularcorsangular5angular-servicesangular-http-interceptors
3
Sankar Namachivayam

Cette implémentation de Http Interceptor devrait vous aider. La classe HttpResponse class a une propriété Headers qui vous aidera à lire l'en-tête de votre réponse.

1
Mavil

Même problème que j'ai rencontré. Si vous appelez votre service via http, cela ne fonctionnera pas, car interceptor ne le connaissant pas, veuillez utiliser httpClient, puis interceptor détectera automatiquement chaque requête et interceptor enverra également vos en-têtes côté serveur.

AppHttpInterceptor.ts 

    import { Injectable } from "@angular/core";
    import {
        HttpInterceptor,
        HttpRequest,
        HttpResponse,
        HttpErrorResponse,
        HttpHandler,
        HttpEvent
    } from '@angular/common/http';

    import { Observable } from 'rxjs/Observable';
    import 'rxjs/add/operator/do';
    import 'rxjs/add/operator/catch';
    import 'rxjs/add/observable/throw';
    import { Http, Response, RequestOptions, Headers } from '@angular/http';
    import { Router } from '@angular/router'


    @Injectable()
    export class AppHttpInterceptor implements HttpInterceptor {
        constructor(private router: Router){

        }
        headers = new Headers({
            'Content-Type': 'application/json',
            'Token': localStorage.getItem("Token")
        });
        intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

            console.log("intercepted request ... ");

            // Clone the request to add the new header.
            const authReq = req.clone({ headers: req.headers.set("Token", localStorage.getItem("Token")) });

            console.log("Sending request with new header now ...");

            //send the newly created request
            return next.handle(authReq)
                .catch(err => {
                    // onError
                    console.log(err);
                    if (err instanceof HttpErrorResponse) {
                        console.log(err.status);
                        console.log(err.statusText);
                        if (err.status === 401) {
                            window.location.href = "/login";
                        }
                    }
                    return Observable.throw(err);
                }) as any;
        }
    }

app.module.ts 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { HttpClient } from "@angular/common/http";
import { FormsModule } from '@angular/forms';
import { ToasterModule, ToasterService } from "angular2-toaster";
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule } from '@angular/router';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule,HTTP_INTERCEPTORS} from '@angular/common/http';
import {AppHttpInterceptor} from './Common/AuthInterceptor';
import { AppRoutes } from '../app/Common/Routes';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule, HttpModule,HttpClientModule, ReactiveFormsModule, FormsModule, BrowserAnimationsModule, RouterModule.forRoot(AppRoutes)
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AppHttpInterceptor,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { 
  constructor(private httpClient: HttpClient){
    this.httpClient.get("https://jsonplaceholder.typicode.com/users").subscribe(
      success => {
        console.log("Successfully Completed");
        console.log(success);
      }
    );
  }
}
0
sebu

Cette réponse Stack Overflow nous a aidés à résoudre ce problème. Le problème est dans la configuration de nginx. Nous avons toujours oublié le mot clé dans access-control-expose-header.

0
Sankar Namachivayam

des docs https://angular.io/guide/http#intercepting-requests-and-responses

const authReq = req.clone({
      headers: req.headers.set('Authorization', authToken)
    });

    // send cloned request with header to the next handler.
    return next.handle(authReq);

voir qui utilise une nouvelle variable, voir comment changer les en-têtes en utilisant set sur req.headers

0
Eliseo