Angular 5 HTTP Interceptor erkennt Antwortheader (POST) nicht

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.

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

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.

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