[英]Angular HttpClient missing response headers
I am trying to get into angular lately.我最近试图进入角度。 I have a paginated request.
我有一个分页请求。
const myParams = new HttpParams().set('page', page.toString()).set('size', size.toString());
this.http.get<HttpResponse<User[]>>('https://localhost:8443/user/', {
headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
params: myParams,
observe: 'response'
}).suscribe((response: HttpResponse<User[]>) => this.data = response.body);
The total count of elements in the DB is transfered to the Client in the X-Total-Count
header. DB 中元素的总数在
X-Total-Count
标头中传输到客户端。 i tried to read it like that:我试着这样读:
.suscribe((response: HttpResponse<User[]>) => {
this.data = response.body;
this.totalCount = response.headers.get('X-Total-Count');
});
But this does not work.但这不起作用。 It turns out that response.headers only includes a subset of the real http-response-headers.
结果是 response.headers 只包含真正的 http-response-headers 的一个子集。
this is what the headers object looks like这是 headers 对象的样子
"headers": {
"normalizedNames": {},
"lazyUpdate": null
}
I am sure that X-Total-Count has been sent.我确定 X-Total-Count 已发送。 Firefox devtools show it.
Firefox devtools 显示了它。 Could you please tell me how to include it into the response?
你能告诉我如何将它包含在响应中吗?
UPDATE更新
This question differs from the one that has been identified as a duplicate in the following way: I have not been asking about how to inspect the full httpResponse.这个问题与在以下方面被确定为重复的问题不同:我没有询问如何检查完整的 httpResponse。 I figured that out on my own.
这是我自己想出来的。 I have been asking about why the
headers
attribute of the Response is not complete.我一直在问为什么 Response 的
headers
属性不完整。
CORS requests only expose 6 safelisted headers : Cache-Control
Content-Language
Content-Type
Expires
Last-Modified
& Pragma
. CORS 请求仅公开 6 个列入安全名单的标头:
Cache-Control
Content-Language
Content-Type
Expires
Last-Modified
& Pragma
。
In order to access custom headers with a CORS request, the server has to explicitly whitelist them.为了使用 CORS 请求访问自定义标头,服务器必须明确地将它们列入白名单。 This can be done by sending the response header:
Access-Control-Expose-Headers
这可以通过发送响应头来完成:
Access-Control-Expose-Headers
For example: Access-Control-Expose-Headers: X-Total-Count, X-Paging-PageSize
例如:
Access-Control-Expose-Headers: X-Total-Count, X-Paging-PageSize
The headers in an HttpResponse object are lazy-loaded, so headers
will appear to be empty until you force the values to be loaded. HttpResponse 对象中的标头是延迟加载的,因此在您强制加载值之前,
headers
将显示为空。 Try calling response.headers.keys()
to see all available header names.尝试调用
response.headers.keys()
以查看所有可用的标头名称。 By the way, this also forces all values to be loaded into the map response.headers.headers
.顺便说一下,这也强制将所有值加载到地图
response.headers.headers
。
尝试将withCredentials: true
添加到 http 选项对象。
As Tsvetan Ganev stated before, if this is CORS request you need to explicity expose required headers in Access-Control-Expose-Headers
header by name.正如 Tsvetan Ganev 之前所说,如果这是 CORS 请求,您需要按名称在
Access-Control-Expose-Headers
标头中明确公开所需的标头。 To achieve this you need to configure your application server, for example in Spring while using WebMvcConfigurer
you can expose headers like:为此,您需要配置应用程序服务器,例如在 Spring 中使用
WebMvcConfigurer
您可以公开以下标头:
@Configuration
public class WebConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry
.addMapping("/**")
.allowedOrigins("*")
.exposedHeaders("X-Total-Count")
.allowedMethods("*");
}
}
Using this configuration, your browser, beyond 7 default headers:使用此配置,您的浏览器将超过 7 个默认标头:
Cache-Control
Content-Language
Content-Length
Content-Type
Expires
Last-Modified
Pragma
Will expose X-Total-Count
header for your application as well.还将为您的应用程序公开
X-Total-Count
标头。
In my case, Postman was able to fetch the custom "Authorization" header, but Angular wasn't.就我而言,邮递员能够获取自定义的“授权”标头,但 Angular 却没有。 I solved it by explicitly exposing the custom header
我通过显式公开自定义标头来解决它
@Bean
public CorsFilter corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
CorsConfiguration config = new CorsConfiguration();
config.setAllowCredentials(true);
config.addAllowedOrigin("*");
config.addAllowedHeader("*");
// vvv
config.addExposedHeader(HttpHeaders.AUTHORIZATION);
// ^^^
config.addAllowedMethod(HttpMethod.OPTIONS);
config.addAllowedMethod(HttpMethod.GET);
config.addAllowedMethod(HttpMethod.POST);
config.addAllowedMethod(HttpMethod.PUT);
config.addAllowedMethod(HttpMethod.PATCH);
config.addAllowedMethod(HttpMethod.DELETE);
config.setMaxAge(1800L);
source.registerCorsConfiguration("/**", config);
return new CorsFilter(source);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.