React中fetch-intercept拦截器无法获取响应头值问题

该问题和React 16版本、fetch-intercept库本身无关，是浏览器CORS跨域请求的默认安全限制导致：

• 跨域场景下，前端JS默认仅可读取7个CORS安全列表内的响应头：Cache-Control、Content-Language、Content-Length、Content-Type、Expires、Last-Modified、Pragma
• 不在上述列表的自定义响应头（比如业务用的Refresh-Token），即使在Chrome开发者工具Network面板的响应头列表中可见，前端JS也无法直接读取，必须由后端在响应中配置Access-Control-Expose-Headers字段，明确声明需要暴露给前端读取的头名称。
• 你当前控制台打印response.headers仅显示content-length、content-type两个字段，完全符合该限制的表现，并非拦截器逻辑错误。

1. 后端配置CORS暴露头 #

在后端接口响应中添加Access-Control-Expose-Headers字段，把需要前端读取的头名称加入列表：

• 仅需读取Refresh-Token时，配置值为：Refresh-Token
• 需要暴露多个头时用逗号分隔，例如：Refresh-Token, Date, X-Frame-Options

从响应头的Server: WSGIServer/0.2 CPython/3.9.1可判断后端为Django框架，若使用django-cors-headers中间件，直接在配置文件中添加CORS_EXPOSE_HEADERS = ["Refresh-Token"]即可，无需手动拼接响应头。

2. 修正前端拦截器逻辑 #

原有代码存在两处写法错误：

• 错误判断'Refresh-Token' in response：Refresh-Token存储在response.headers对象中，并非response的顶层属性
• 拦截器文件未导出unregister变量，导致App.js中的具名导入拿到undefined，拦截器注册逻辑可能不生效
  修正后的src/interceptors/fetch.js代码如下：

import fetchIntercept from 'fetch-intercept';

export const unregister = fetchIntercept.register({
  response: function (response) {
    const refreshToken = response.headers.get('Refresh-Token');
    if (response.ok && refreshToken) {
      sessionStorage.setItem('token', refreshToken);
    }
    return response;
  },
});

3. 验证效果 #

配置完成后重启后端服务，重新发起请求即可正常读取到目标响应头，response.headers.get('Refresh-Token')不再返回null。

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