Angular 角度Http侦听器列表响应头
以下代码不记录来自服务器的自定义头。我遗漏了什么吗?写出来的标题只有Angular 角度Http侦听器列表响应头,angular,Angular,以下代码不记录来自服务器的自定义头。我遗漏了什么吗?写出来的标题只有内容类型和内容长度 import { Injectable } from '@angular/core'; import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpErrorResponse, HttpResponse } from '@angular/common/http'; import { Observable } from 'rxjs'; i
内容类型
和内容长度
import { Injectable } from '@angular/core';
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpErrorResponse, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import { LoaderService } from './loader.service';
import { AuthService } from './services/auth-service';
import * as _ from 'lodash';
import { tap } from 'rxjs/internal/operators/tap';
@Injectable()
export class LoaderInterceptor implements HttpInterceptor {
constructor(public loaderService: LoaderService,
private authService: AuthService) { }
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
this.loaderService.show();
if (!_.isNil(this.authService.authenticatedUser) && this.authService.authenticatedUser.token) {
request = request.clone({
setHeaders: {
'Content-Type': 'application/json',
Authorization: `Bearer ${this.authService.authenticatedUser.token}`
}
});
}
return next.handle(request).pipe(tap((resp: HttpResponse<any>) => {
if (resp instanceof HttpResponse) {
for (const h of resp.headers.keys()) {
console.log('header', h);
}
}
},
(resp: any) => {
if (resp instanceof HttpErrorResponse) {
if (resp.status !== 401) {
return;
}
this.loaderService.setUnAuthorized();
}
}, () => { this.loaderService.hide(); }));
}
}
从'@angular/core'导入{Injectable};
从'@angular/common/http'导入{HttpEvent,HttpHandler,HttpInterceptor,HttpRequest,HttpErrorResponse,HttpResponse};
从“rxjs”导入{Observable};
从“/loader.service”导入{LoaderService};
从“./services/auth-service”导入{auth-service};
从“lodash”导入*as uuu;
从'rxjs/internal/operators/tap'导入{tap};
@可注射()
导出类LoaderInterceptor实现HttpInterceptor{
构造函数(公共loaderService:loaderService,
私有authService:authService){}
拦截(请求:HttpRequest,下一步:HttpHandler):可观察{
this.loaderService.show();
if(!\u0.isNil(this.authService.authenticatedUser)&&this.authService.authenticatedUser.token){
request=request.clone({
集合标题:{
“内容类型”:“应用程序/json”,
授权:`Bearer${this.authService.authenticatedUser.token}`
}
});
}
返回next.handle(request).pipe(轻触((resp:HttpResponse)=>{
if(HttpResponse的响应实例){
for(resp.headers.keys()的常数){
console.log('header',h);
}
}
},
(响应:任何)=>{
if(HttpErrorResponse的响应实例){
如果(分别状态!==401){
返回;
}
this.loaderService.setUnAuthorized();
}
},()=>{this.loaderService.hide();}));
}
}
访问控制暴露标头响应标头通过列出其名称指示哪些标头可以作为响应的一部分公开
默认情况下,仅显示7个CORS安全列出的响应头:
Cache-Control
Content-Language
Content-Length
Content-Type
Expires
Last-Modified
Pragma
如果希望客户端能够访问其他标头,则必须使用访问控制公开标头标头列出它们
Access-Control-Expose-Headers: *
例如,对于ngnix,它将是:
add_header 'Access-Control-Expose-Headers' '*';
我的服务器是在DotNet中实现的,因此使用上述原理可以实现以下功能:
string[] headers = new string[] {"X-Custom-1", "X-Custom-2"};
services.AddCors(options =>
{
options.AddPolicy("AllowAll", builder =>
{
builder.AllowAnyHeader()
.AllowAnyMethod()
.AllowAnyOrigin()
.WithExposedHeaders(headers);
});
});
您是否已使用访问控制公开头从服务器公开自定义头?因为不是所有的头都可以从客户端访问是的,这就是原因。谢谢我在答案中添加了更多信息,以供未来读者参考