web-dev-qa-db-ja.com

Angular 5 Http Interceptorが応答ヘッダーを検出しない（POST）

コンソールにログを記録すると、インターセプターでカスタム応答ヘッダーを取得できません。 コンソールはインターセプターのhttpResponseをログに記録しました

''コンソールログ応答 ''

HttpResponse {headers：HttpHeaders、status：200、statusText： "OK"、ok：true、…}

HttpHeaders lazyInit：ƒ（）lazyUpdate：null NormalNames：Map（0）{}proto：Object ok：true status：200 statusText： "OK"タイプ：4

また、サーバー側にAccess-control-expose-headerを追加しました。それでも応答が得られません。インターセプターメソッドで何かを見逃しているかどうかわかりません。

インターセプターメソッド

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

}

インターセプター機能

ネットワークタブのカスタムヘッダー

access-control-allow-credentials：true

アクセス制御許可メソッド：GET、POST、OPTIONS

access-control-allow-Origin：*

access-control-expose-headers：アクセストークン、クライアント、有効期限、トークンタイプ、uid

アクセストークン：haIXZmNWSdKJqN2by7JH1g

cache-control：max-age = 0、private、must-revalidate

クライアント：j_2dxD7NVMjGeX8BbBuELA

content-type：application/json; charset = utf-8

有効期限：1525931943

ネットワークタブでカスタムヘッダーを取得

また、これは私のサービスコールです。コールの「応答」も観察してください。

サービスコール

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

サービスコール

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

お願い助けて。前もって感謝します！

angularangular5angular-servicesangular-http-interceptors
5
Sankar Namachivayam

この実装 HttpInterceptorが参考になります。 HttpResponse クラスには、応答ヘッダーの読み取りに役立つHeadersプロパティがあります。

1
Mavil

私が直面した同じ問題。 httpを介してサービスを呼び出す場合は機能しません。インターセプターが使い慣れていないため、httpClientを使用してから、自動的にインターセプターが各要求を検出し、インターセプターがヘッダーをサーバー側に送信します。

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

このスタックオーバーフローの回答 はこの問題の解決に役立ちました。問題はnginx構成にあります。 access-control-expose-headerでalwaysキーワードを逃しました。

0
Sankar Namachivayam

ドキュメントから 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);

新しい変数を使用することを確認し、set over req.headersを使用してヘッダーを変更する方法を確認してください

0
Eliseo