webentwicklung-frage-antwort-db.com.de

Angular 5 HTTP Interceptor erkennt Antwortheader (POST) nicht

Ich kann den benutzerdefinierten Antwortheader nicht in Interceptor abrufen, wenn ich ihn in der Konsole protokolliere. console hat den Interceptor httpResponse protokolliert

'' Konsolenprotokollantwort ''

HttpResponse { Kopfzeilen: HttpHeaders, Status: 200, StatusText: "OK", ok: true,… }

HttpHeaders LazyInit : Ƒ () LazyUpdate : Null NormalizedNames : Karte (0) {} proto : Objekt Ok : true status : 200 statusText : "OK" Typ : 4

Wir haben auch den Access-Control-Expose-Header auf der Serverseite hinzugefügt. Trotzdem bekomme ich keine Antwort. Ich bin mir nicht sicher, ob mir bei der Interceptor-Methode etwas fehlt. 

Interceptor-Methode

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;
        })

}

Interceptor-Funktion

Benutzerdefinierter Header in der Registerkarte "Netzwerk"

zugriffskontrollgenehmigungsnachweise: true

zugriffskontroll-Zulassungsmethoden: GET, POST, OPTIONS

zugriffskontrolle erlaubt-Origin: *

zugriffskontroll-Expose-Header: Zugriffstoken, Client, Ablaufdatum, Token-Typ, Benutzer-ID

zugriffstoken: haIXZmNWSdKJqN2by7JH1g

cache-Steuerung: max-age = 0, privat, muss erneut validiert werden

client: j_2dxD7NVMjGeX8BbBuELA

inhaltstyp: application/json; Zeichensatz = utf-8

ablauf: 1525931943

benutzerdefinierte Header in der Registerkarte "Netzwerk" erhalten

Dies ist auch mein Serviceabruf. Außerdem wurde beim Anruf 'Antwort' hinzugefügt.

Serviceabruf

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

Service-Anruf

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 { }

Hilf mir bitte. Danke im Voraus!

3

Diese Implementierung von Http Interceptor sollte Ihnen helfen. Die HttpResponse -Klasse verfügt über eine Headers - Eigenschaft, mit der Sie den Antwortheader lesen können.

1
Mavil

Das gleiche Problem, dem ich begegnet bin. Wenn Sie Ihren Dienst über http anrufen, funktioniert er nicht. Da Interceptor nicht mit dem Dienst vertraut ist, verwenden Sie httpClient. Interceptor erkennt dann automatisch jede Anfrage und Interceptor sendet Ihre Header ebenfalls auf die Serverseite

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

Diese Stack Overflow-Antwort hat uns geholfen, dieses Problem zu lösen. Das Problem liegt in der Nginx-Konfiguration. Das Schlüsselwort access-control-expose-header wurde immer vermisst.

0

aus den Dokumenten 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);

verwenden Sie eine neue Variable, um zu sehen, wie Sie die Header mithilfe von set über req.headers ändern

0
Eliseo