Failed to execute 'fetch' on 'Window': Failed to read the 'headers' property fro...

🔧 报错分析

根据你提供的报错信息，这是一个发生在 fetch API 使用过程中的典型编码错误。下面进行详细分析。

#### 📝 错误翻译

原文：Failed to execute 'fetch' on 'Window': Failed to read the 'headers' property from 'RequestInit': String contains non ISO-8859-1 code point.
译文：无法在‘Window’上执行‘fetch’：无法读取‘RequestInit’的‘headers’属性：字符串包含非ISO-8859-1编码的字符。

#### 🎯 原因分析
这个错误的根本原因是：你在构建 fetch 请求时，为请求头（headers）设置的某个值（value）中包含了非ISO-8859-1编码范围内的字符（例如中文、日文、特殊emoji等）。

#### 💡 解决方案
你需要对包含非ISO-8859-1字符的请求头值进行编码。以下是两种常用且有效的编码方法：

方案一：使用 encodeURIComponent 进行编码（推荐用于大部分场景）

const myHeaderValue = "这是一个中文的Header值";
const encodedValue = encodeURIComponent(myHeaderValue);

fetch('https://example.com/api', {
  method: 'POST',
  headers: {
    // 对值进行URI编码，确保其只包含ASCII字符
    'X-Custom-Header': encodedValue,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ data: 'some data' })
});

方案二：使用 btoa 进行 Base64 编码（适用于需要完整二进制安全的场景）

const myHeaderValue = "含特殊字符的值：@example#";
// Base64编码同样会将任意字符转换为ASCII字符子集
const encodedValue = btoa(unescape(encodeURIComponent(myHeaderValue)));

fetch('https://example.com/api', {
  headers: {
    'Authorization': `Basic ${encodedValue}` // 例如用于Basic认证
  }
});

重要提示：如果服务器端期望接收的就是原始字符串，你需要在接收方对编码后的值进行相应的解码（decodeURIComponent 或 atob）。

#### 🛡️ 预防措施