如何在Angular 5中从WP-API获取请求头信息

嘿，我正好熟悉Angular和WP-API的结合，来帮你搞定获取响应头的问题——我猜你要的是WP-API返回的分页相关头信息（比如X-WP-Total总条数、X-WP-TotalPages总页数）对吧？这就给你一步步说清楚：

1. 修改请求，获取完整响应对象 #

Angular默认的get请求只会返回响应体数据，如果你要拿到响应头，需要让请求返回完整的响应对象，分两种情况：

如果你用的是Angular 5推荐的HttpClient模块 #

在get请求的第二个参数里添加{ observe: 'response' }配置，这样就能拿到包含headers的完整响应：

return this.http.get(
  `${this.baseUrl}${this.apiUrl}?per_page=100&page=${page_number}&filter[meta_value][abc]=${abc}&filter[meta_value][def]=${def}&filter[meta_value][ghi]=${ghi}`,
  { observe: 'response' }
);

如果你用的是旧版Http模块（Angular 4及之前兼容过来的） #

直接订阅请求结果，把响应类型指定为Response即可：

import { Response } from '@angular/http';

// 你的请求代码不变，订阅时处理：
this.http.get(yourFullUrl).subscribe((response: Response) => {
  // 这里就能访问headers了
});

2. 订阅时提取响应头信息 #

不管用哪种模块，订阅的时候都可以轻松拿到需要的头信息：

// 假设你把请求封装在某个服务方法里，比如getPosts()
this.yourDataService.getPosts().subscribe(response => {
  // 用HttpClient的情况，response是HttpResponse对象
  const totalItems = response.headers.get('X-WP-Total');
  const totalPages = response.headers.get('X-WP-TotalPages');
  const tableData = response.body;

  // 用旧Http的情况，response是Response对象
  // const totalItems = response.headers.get('X-WP-Total');
  // const totalPages = response.headers.get('X-WP-TotalPages');
  // const tableData = response.json();

  // 接下来就可以用totalItems和totalPages做分页逻辑啦
  console.log(`总共有${totalItems}条数据，分${totalPages}页`);
});

3. 关键：解决CORS跨域导致的头信息无法访问问题 #

如果你的Angular前端和WP-API不在同一个域名下，浏览器会因为安全策略阻止你读取X-WP-Total这类自定义响应头。这时候需要在WordPress端配置CORS，允许暴露这些头：

在WordPress主题的functions.php文件里添加以下代码：

add_action('rest_api_init', function() {
    remove_filter('rest_pre_serve_request', 'rest_send_cors_headers');
    add_filter('rest_pre_serve_request', function($value) {
        // 替换成你的前端域名，比如http://localhost:4200，更安全
        header('Access-Control-Allow-Origin: *');
        header('Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE');
        header('Access-Control-Allow-Headers: Content-Type');
        // 暴露需要获取的响应头，这里就是WP-API的分页头
        header('Access-Control-Expose-Headers: X-WP-Total, X-WP-TotalPages');
        return $value;
    });
});

这样前端就能正常读取这些头信息了！

内容的提问来源于stack exchange，提问作者Naeem Hussain