Angular 5 Http Interceptor不检测响应头（POST）

4 回答

• 0

  This Stack Overflow answer帮助我们解决了这个问题 . 问题出在nginx配置中 . 我们错过了access-control-expose-header中的always关键字 .

  回复于 2024-05-05T22:28:35+08:00
• 1

  来自文档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更改 Headers

  回复于 2024-05-05T22:28:35+08:00
• 0

  我面临同样的问题 . 如果您通过 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);
        }
      );
    }
  }
  

  回复于 2024-05-05T22:28:35+08:00
• 0

  This imlementation的HttpInterceptor应该对你有帮助 . HttpResponse类具有 Headers 属性，可帮助您读取响应标头 .

  回复于 2024-05-05T22:28:35+08:00