fetch提交表单报错Failed to execute fetch on Window Invalid name修复

AI 小北

2026-8-27

问题现象

实现网站联系表单提交逻辑时，使用fetch向接口发送JSON格式表单数据，控制台抛出错误：Failed to execute 'fetch' on 'Window': Invalid name，但完全相同的提交参数改用XMLHttpRequest实现可以正常运行，出问题的代码如下：

contactForm.addEventListener('submit', async function (e) {
  e.preventDefault();
  // console.log('clicked');

  const formData = {
    name: formName.value,
    email: formEmail.value,
    tel: formTel.value,
    message: formMessage.value,
  };

  // FIXME
  try {
    const response = await fetch('/', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(formData),
    });

    return response.json();
  } catch (err) {
    console.log(err.message);
  }

  // XMLHttpRequest方式可正常运行
  // let xhr = new XMLHttpRequest();
  // xhr.open('POST', '/');
  // xhr.setRequestHeader('Content-Type', 'application/json');
  // xhr.onload = function () {
  //   if (xhr.responseText === 'success') {
  //     //add a popout window

  //     formName.value = '';
  //     formEmail.value = '';
  //     formTel.value = '';
  //     message.value = '';
  //   } else {
  //     alert('Something went wrong!');
  //   }
  // };
  // xhr.send(JSON.stringify(formData));
});

错误原因

这个错误是fetch校验HTTP请求头合法性时抛出的类型错误。fetch底层对请求头的合规性校验比XMLHttpRequest严格得多，只要检测到请求头列表里存在不符合HTTP命名规范的字段（比如键名包含空格、中文、不可打印ASCII字符，或者键名不是纯字符串类型），就会直接中断请求抛出错误，不会发起网络连接。

结合代码特征，这个问题基本都是以下几种情况导致的：

贴出的是简化后的代码，实际运行时headers对象存在动态赋值逻辑，赋值时不小心把DOM节点、undefined、普通对象这类非字符串值当成了头字段名，转成字符串后不符合HTTP头命名规则
页面DOM的全局id/name映射污染了配置变量：比如页面里存在id="headers"、name="name"的元素，浏览器会默认把这类元素挂载到window对象上，导致定义的headers配置被意外覆盖成DOM元素，fetch解析头时拿到非法值
浏览器注入脚本（广告拦截、油猴脚本类扩展）篡改了fetch的默认请求头，注入了不符合规范的头字段
代码里意外重写了原生Headers构造函数，导致fetch内部初始化头对象时逻辑异常
代码里存在未声明直接使用的变量（比如XMLHttpRequest逻辑里清空输入框时写的message.value，没有对应声明），这类变量会顺着作用域链拿到window上的意外值，很容易污染请求配置。

修复方案

按顺序排查即可快速定位问题：

先做最小场景验证：打开浏览器控制台，直接运行下面的最小化fetch请求，排除其他代码干扰。如果这段代码运行正常，说明问题出在其他业务代码对配置的污染，不是fetch本身的问题：

fetch('/', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({test: 1})
}).then(res => console.log('请求正常', res)).catch(err => console.log('请求报错', err))

全局搜索所有给headers对象添加属性的逻辑，在赋值前打印头字段的键名和值，确保所有键名都是纯字符串，不包含空格、中文、特殊符号，禁止用DOM节点、普通对象当键名。
在fetch调用前加一行调试代码，打印关键变量确认没有被污染：

console.log('检查配置：', 
  typeof headers === 'object' ? headers : 'headers不是对象',
  window.Headers.toString().includes('[native code]') ? 'Headers构造函数正常' : 'Headers构造函数被覆盖'
)

打开浏览器无痕模式，禁用所有扩展后测试，排除插件脚本注入的干扰。
把代码里所有未声明就使用的变量补全声明，避免作用域链查找拿到意外的全局值。

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