createAsyncThunk发起Fetch请求时无法读取response.headers问题求助

问题原因及修复方案 #

1. Fetch Headers 对象的打印方式错误
   Fetch API 返回的 response.headers 不是普通 JS 对象，是可迭代的 Headers 类实例，直接调用 console.log(response.headers) 时浏览器控制台会展示为空对象，属于正常现象，无法通过这种方式直接查看所有头内容。
   正确的读取方式：

• 读取单个响应头：使用 get() 方法

console.log(response.headers.get('AgentId')) // 直接打印你需要的自定义头

• 遍历所有响应头：使用 entries() 迭代器

for (const [key, value] of response.headers.entries()) {
  console.log(`${key}: ${value}`)
}

2. 确认服务端配置生效
   如果按上述方法仍读不到头，按以下顺序排查：

• 先打开浏览器控制台「网络」面板，找到对应的Fetch请求，查看「响应头」列表是否真的存在 AgentId 字段，先确认服务端确实返回了该响应头。
• 确认CORS中间件的加载顺序早于所有业务路由：你当前的配置顺序是对的，但如果你的业务路由注册代码写在app.use(cors(...))之前，CORS配置不会对之前的路由生效，会导致自定义头无法被前端读取。
• 确认服务端设置响应头的代码确实执行：检查是否存在其他中间件覆盖了AgentId响应头，或者设置头的代码在res.send()/res.json()之后执行（响应已经发送后再设头不会生效）。

该问题和Redux Toolkit无关，属于Fetch API和CORS的常见使用误区。

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