自定义fetch API请求头,header无法被遍历

代码：取到之后忘上加，用fetch 的Headers

 const requestHeaders = new Headers(headers);
 requestHeaders.append('deviceId', deviceId || '');
   

发请求的时候

        await fetch(requestUrl, {

                headers: requestHeaders,

如果模式选项设置为 no-cors，则允许的标头集将受到进一步限制。

同时 headers 还会给你转换一下，有一些限制，比如说不能有空格，还会给你转换一下标志头大写。

但是需要注意headers打印出来空的，但是发请求的时候却有，

原因分析

1. Headers 对象的特殊性
   Headers 是 Fetch API 提供的特殊接口，其属性 不可直接枚举，导致以下现象：

   • 直接 console.log(headers) 只会显示空的 Headers {} 对象

   • 但实际使用时（如通过 fetch 发送），浏览器会正确序列化并携带所有头信息

2. JSON.stringify 的局限
   JSON.stringify(requestHeaders) 无法正确序列化 Headers 对象，结果始终为 {}，因为其内部数据存储方式不暴露给普通遍历方法

3. 浏览器控制台的延迟展开特性
   控制台在打印对象时，默认显示的是 当前时刻的快照，而后续对对象的修改可能被动态更新（但 Headers 的设计导致其无法被动态观测）

验证方法

正确遍历 Headers 内容

// 使用 Headers.entries() 获取实际内容
const headersArray = Array.from(requestHeaders.entries());
console.log('实际 Headers 内容:', headersArray);

// 输出示例：
// [
//   ['Authorization', 'Bearer xxx'],
//   ['appId', '123'],
//   ['deviceId', 'abc'],
//   ...
// ]

发送前转换为普通对象

const headersObject = Object.fromEntries(requestHeaders.entries());
console.log('Headers 对象:', headersObject);

问题修复方案

方案 1：在日志中显示实际头信息

console.log('Headers 内容:', Object.fromEntries(requestHeaders.entries()));

方案 2：使用中间转换对象

// 创建普通对象用于调试
const debugHeaders = {
  Authorization: token ? `Bearer ${token}` : '',
  appId: APP_ID || '',
  deviceId: deviceId || '',
  sDeviceId: deviceId || '',
  'Content-Type': 'application/json'
};

console.log('调试 Headers:', debugHeaders);

// 实际使用时仍用 Headers 对象
const requestHeaders = new Headers(debugHeaders);