如何修复getNews中Uncaught TypeError: Failed to construct 'Headers'错误

错误原因及修复方案 #

1. Uncaught TypeError: Failed to construct 'Headers': Invalid name #

问题根源：请求头字段名"X-Requested With"包含空格，HTTP标准头字段名不允许有空格，正确写法是"X-Requested-With"（用连字符分隔）。

2. Unchecked runtime.lastError: A listener indicated an asynchronous response by returning true... #

问题根源：循环条件错误+HTML字符串拼接语法错误，导致代码执行异常，进而引发异步通道提前关闭：

• 循环条件误写为response < response.articles.length，正确应为i < response.articles.length
• HTML拼接时图片src的引号包裹错误、href属性未加引号，还存在多余的闭合div标签
• 原HTML中输出容器只有class="output"，缺少id="output"，导致getElementById无法定位元素

修复后的完整代码 #

JavaScript部分 #

function getNews() {
  // 修复请求头字段名
  fetch(
    "https://cors-anywhere.herokuapp.com/https://newsapi.org/v2/top-headlines?country=us&apiKey=<My ApiKey>",
    { headers: new Headers({ "X-Requested-With": "abcd" }) }
  )
    .then((res) => res.json())
    .then((response) => {
      let newsHtml = '';
      // 修正循环条件
      for (let i = 0; i < response.articles.length; i++) {
        const article = response.articles[i];
        // 用模板字符串优化HTML拼接，避免语法错误
        newsHtml += `
          <div class='article'>
            <img class='image' src='${article.urlToImage || ''}' alt='文章封面'>
            <h1>${article.title}</h1>
            <span>${article.source.name}</span>
            <p>${article.description}</p>
            <a href='${article.url}' target='_blank'>查看原文</a>
          </div>
        `;
      }
      // 一次性更新DOM，提升性能
      document.getElementById("output").innerHTML = newsHtml;
    })
    .catch(err => console.error('请求出错:', err)); // 新增错误捕获，方便排查问题
}

HTML部分 #

<body>
  <button class="btn" onclick="getNews()">Get News Here.</button>
  <div id="output" class="output"></div> <!-- 添加id属性，确保能被JS定位 -->
  <script src="index.js"></script>
</body>

额外优化说明 #

• 新增catch捕获请求错误，便于排查网络或API返回问题
• 使用模板字符串替代传统字符串拼接，代码更易读且不易出错
• 一次性拼接所有HTML后再赋值给innerHTML，减少DOM操作次数，提升性能
• 给图片添加alt属性，增强页面可访问性

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