如何获取响应头-获取响应头的问题 [英] How to get response headers - Issue with getting response headers
问题描述
我在响应头中传递了分页信息,并且无法在angular 8中使用以下方法.我一直在获取0
,但响应中显示出不同的值.谁能让我知道我在哪里犯错了?
I'm passing pagination information in response header and unable to get using following method in angular 8. I'm getting 0
all the time but in response showing diffrent value. Can anyone let me know where I made mistake?
app.service.ts
indexBooking(perPage: number, page: number) {
return this.http
.get<any[]>(`${this.apiBaseUrl}/prices`, {
params: formatParameters({perPage, page}),
observe: 'response',
})
.pipe(
map((res) => ({
max: Number.parseInt(res.headers.get('x-total-count'), 10) || 0,
index: Number.parseInt(res.headers.get('x-next-page'), 10) || 0,
page: Number.parseInt(res.headers.get('x-per-page'), 10) || 20,
items: res.body,
})),
);
}
app.component.ts
ngAfterViewInit() {
merge(this.paginator.page)
.pipe(
startWith({}),
switchMap(() => {
return this.bookingService.indexBooking(this.paginator.pageSize, this.paginator.pageIndex);
}),
map((data) => {
console.log('data', data);
this.resultsLength = data.items.length;
return data.items;
}),
catchError(() => {
return observableOf([]);
}),
)
.subscribe((data) => (this.data = data));
}
响应标题图片
推荐答案
您需要在后端设置Access-Control-Expose-Headers
才能显示您的自定义响应标头.
You need to set Access-Control-Expose-Headers
in your backend to expose your custom response headers.
来自 Mozilla Docs on Access-Control-Expose-Headers :
Access-Control-Expose-Headers响应标头通过列出其标头指示哪些标头可以作为响应的一部分公开.
The Access-Control-Expose-Headers response header indicates which headers can be exposed as part of the response by listing their names.
默认情况下,仅公开6个CORS安全列出的响应标头:
By default, only the 6 CORS-safelisted response headers are exposed:
缓存控制,内容语言,内容类型,到期时间,最后修改时间,语法
Cache-Control, Content-Language, Content-Type, Expires, Last-Modified, Pragma
如果希望客户端能够访问其他标头,则必须使用Access-Control-Expose-Headers标头列出它们.
If you want clients to be able to access other headers, you have to list them using the Access-Control-Expose-Headers header.
因此,您必须对后端进行编码以设置Access-Control-Expose-Headers
,以便其返回:
Therefore, you have to code your backend to set Access-Control-Expose-Headers
such that it returns:
Access-Control-Expose-Headers: x-total-count, x-next-page, x-per-page
OR
Access-Control-Expose-Headers: *
这是一个简单的 stackblitz 供您探索,您可以在StackBlitz的控制台中观察到我可以检索Etag标头,但不能 X-Frame-Options,因为 https://api.github. com 已将Access-Contorl-Expose-Headers
设置为公开Etag,但不公开X-Frame-Options:
Here's a simple stackblitz for you to explore, you can observe in the StackBlitz's console that I can retrieve Etag headers but not X-Frame-Options because https://api.github.com has set Access-Contorl-Expose-Headers
to expose Etag but not X-Frame-Options:
这篇关于如何获取响应头-获取响应头的问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!