使用Fetch请求WordPress API时响应Header为空，如何获取完整Header？

我来帮你拆解这个问题——从你给出的响应信息里type: "cors"就能找到核心原因，再给你对应的解决步骤：

一、Headers看起来为空的原因 #

你的请求属于CORS跨域请求（前端域名和WordPress API域名不一致），浏览器出于安全策略，会对跨域响应的Headers做限制：

• 只有被标记为「CORS安全的响应头」（比如Content-Type、Cache-Control这类标准头）会被暴露给前端JS
• WordPress API默认返回的很多实用头（比如X-WP-Total、X-WP-TotalPages）不在默认暴露列表里，所以浏览器会把这些头隐藏起来，导致你直接看headers对象时显示为空，但实际上这些头是存在的，只是JS暂时访问不到。

二、解决办法 #

需要分WordPress后端配置和前端Fetch代码调整两步来做：

1. WordPress后端：配置CORS暴露指定Headers #

你需要让WordPress明确告诉浏览器，哪些响应头可以被前端跨域访问。有两种方式：

• 代码方式：把下面的代码添加到你当前主题的functions.php文件里（注意替换成你的实际前端域名）：

  add_action('rest_api_init', function() {
      // 允许你的前端域名跨域请求，生产环境建议不要用*
      header("Access-Control-Allow-Origin: https://你的前端域名.com");
      // 列出你需要访问的响应头，按需添加
      header("Access-Control-Expose-Headers: X-WP-Total, X-WP-TotalPages, Content-Type, Link");
  });
  

• 插件方式：如果不想改代码，可以安装专门的CORS管理插件（比如「WP CORS」），在插件设置页面里配置允许的前端域名，以及需要暴露的响应头列表。

2. 前端：正确获取Headers #

即使后端配置好了，你也不能直接通过res.headers的对象字面量看到所有头，需要用Fetch API提供的方法来获取：

• 获取单个指定头：用res.headers.get('头名称')
• 遍历所有可访问的头：用res.headers.forEach()

修改你的Fetch代码示例：

export const getJobs = () => {
  return dispatch => {
    fetch(endpoints.jobs)
      .then(res => {
        // 获取WordPress分页相关的头
        const totalJobs = res.headers.get('X-WP-Total');
        const totalPages = res.headers.get('X-WP-TotalPages');
        console.log('总职位数:', totalJobs, '总页数:', totalPages);
        
        // 遍历所有可访问的头查看
        res.headers.forEach((value, key) => {
          console.log(`${key}: ${value}`);
        });
        
        return res.json();
      })
      .then(data => dispatch(setJobs(data)))
  };
};

额外提示 #

如果你的前端和WordPress API是同域的，就不会有这个问题，但从type: "cors"来看你是跨域请求，所以必须做上面的配置。

内容的提问来源于stack exchange，提问作者Jorge Rodríguez