React JS中读取Fetch API响应头自定义键值返回空值求助

常见问题根因 #

• 代码逻辑位置错误：headers是Fetch返回的原生Response对象的内置属性，不属于解析后的JSON业务数据。当前代码在调用res.json()把Response转成普通JS对象之后，才尝试读取jsong.headers，相当于从业务返回值里找根本不存在的属性，自然读不到内容。
  正确的读取顺序是在调用res.json()之前，先从原始Response对象上提取需要的响应头，不能跳过原始响应对象直接从解析结果里找头信息。
• 跨域安全限制拦截：如果前端域名和接口域名不一致，浏览器默认只允许前端JS读取6类基础HTTP响应头，所有自定义响应头默认是被浏览器屏蔽的，哪怕在网络面板里能看到头的存在，前端代码也读不到内容。

正确实现代码示例 #

const requestOptions = {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    pid: d,
    cy: v
  })
};

fetch('https://mysite/api/manage/', requestOptions)
  .then(res => {
    // 先在原始Response阶段读取自定义响应头
    // 替换成你实际要读的自定义头字段名
    const customHeaderVal = res.headers.get('你的自定义头字段名');
    console.log('读取到的自定义头值：', customHeaderVal);
    // 读完头再解析JSON响应体
    return res.json();
  })
  .then(jsong => {
    console.log('接口返回的业务数据：', jsong);
  })
  .catch((err) => {
    console.log('请求异常：', err);
  });

分步排查流程 #

• 第一步：按照上面的顺序调整代码，把读取headers的逻辑移到res.json()之前，测试能不能读到值
• 第二步：如果调整后还是读不到，检查接口响应里有没有配置Access-Control-Expose-Headers响应头。比如你自定义的头叫X-Token-Expire，后端就需要在响应里明确加上这个配置头，值写要暴露的自定义头字段名；如果有多个自定义头需要暴露，就用逗号分隔列全，否则浏览器会默认拦截这些自定义头的读取权限
• 第三步：核对字段名匹配度。Fetch的Headers对象虽然大小写不敏感，但如果反向代理（比如Nginx）对响应头做了过滤、改写，把自定义头的字段名改了，或者漏写在Access-Control-Expose-Headers的暴露列表里，都会导致读取结果为空。可以对照网络面板里的实际响应头，核对暴露列表和要读取的字段名完全一致。

注意：不要尝试从解析后的JSON业务数据里找headers相关字段，HTTP响应头和请求返回的业务JSON是两个完全独立的传输维度，不存在从属关系。

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