Angular调用WP Rest Api时X-WP-TotalPages响应头获取异常

嘿，我来帮你搞定这个困扰！你遇到的情况其实很常见——Network面板能看到响应头但Console输出undefined，主要是两个核心原因：浏览器的CORS限制和Angular请求默认只返回响应体，咱们一步步拆解解决：

1. 先修正你的Angular请求写法 #

默认情况下，Angular的HttpClient.get()只返回响应体数据，不会携带响应头信息。你需要显式设置observe: 'response'来获取完整的HttpResponse对象，这样才能访问到响应头。

举个例子，错误的写法：

// service.ts里的请求
getPosts() {
  return this.http.get('https://你的WP站点/wp-json/wp/v2/posts');
}

// app-component.ts里的订阅
this.postService.getPosts().subscribe(data => {
  console.log(data); // 只有文章数据，拿不到响应头
});

改成正确的写法：

// service.ts里修改请求配置
getPosts() {
  // 添加observe: 'response'，获取完整响应对象
  return this.http.get('https://你的WP站点/wp-json/wp/v2/posts', { observe: 'response' });
}

// app-component.ts里订阅并读取响应头
this.postService.getPosts().subscribe(response => {
  // 先打印所有响应头的键，确认目标头存在
  console.log('所有响应头键:', response.headers.keys());
  
  // 兼容大小写差异，有的服务器会返回小写的头名
  const totalPages = response.headers.get('X-WP-TotalPages') || response.headers.get('x-wp-totalpages');
  console.log('总页数:', totalPages);
});

2. 解决CORS限制导致的响应头无法读取问题 #

如果按上面的写法还是拿不到值，那就是WordPress端没有把X-WP-TotalPages暴露给前端。浏览器的同源策略规定：跨域请求时，只有默认响应头（比如Content-Type）能被前端读取，自定义响应头需要服务器通过Access-Control-Expose-Headers指定允许暴露。

你需要在WordPress中添加配置：

• 打开主题的functions.php文件，插入这段代码：

add_action('rest_api_init', function() {
  // 允许暴露WP分页相关的响应头
  header('Access-Control-Expose-Headers: X-WP-Total, X-WP-TotalPages');
});

• 如果你用了CORS相关的WordPress插件，直接在插件设置里把X-WP-Total和X-WP-TotalPages添加到「允许暴露的响应头」列表中即可。

3. 排查小细节：响应头的大小写问题 #

有些服务器会自动把响应头转换成小写（比如x-wp-totalpages），所以你可以通过response.headers.keys()打印所有键名，确认实际的头名称后再对应获取，避免拼写错误。

按照这几步操作，应该就能顺利拿到X-WP-TotalPages的值啦！

内容的提问来源于stack exchange，提问作者Max.B