''控制台日志响应''
HttpResponse { 标头:HttpHeaders,状态:200,statusText:“确定”,确定:true,... }
HttpHeaders 惰性初始化 : ▪ () 惰性更新 : 无效的 规范化名称 : 地图(0) {} 原型 : 目的 好的 : 真的 地位 : 200 状态文本 : “好的” 类型 : 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;
})
}
网络选项卡中的自定义标头
访问控制允许凭据:true
访问控制允许方法:GET、POST、OPTIONS
访问控制允许来源:*
访问控制公开标头:访问令牌,客户端,到期,令牌类型,uid
访问令牌:haIXZmNWSdKJqN2by7JH1g
缓存控制:max-age=0,私有,必须重新验证
客户端:j_2dxD7NVMjGeX8BbBuELA
内容类型:application/json;字符集=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 { }
请帮助我。预先感谢!
HttpInterceptor的这个实现应该对你有帮助。 HttpResponse 类有一个 Headers 属性,它将帮助您读取响应标头。
我也遇到过同样的问题。如果您通过
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);
}
);
}
}
这个 Stack Overflow 答案帮助我们解决了这个问题。问题出在 nginx 配置上。我们错过了 access-control-expose-header 中的always关键字。
headers 映射是延迟加载的,因此需要触发映射加载内容才能列出 headers,例如调用 headers.keys() 或通过 key headers.get('name-of-key ').
来自文档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 来更改标头