读取本地外部JSON文件渲染到HTML表格时报Cannot set headers错误如何解决

错误原因与修复方案 #

Cannot set headers after they are sent to the client属于Node.js服务端报错，本质是同一个请求内，服务端已经向客户端返回过一次响应，又试图二次修改响应头、发送新的响应，一个请求只能对应一次响应返回。

一、后端修复（解决报错核心问题） #

你目前贴的varer-controller.js代码片段只触发了一次res.send，报错大概率是路由上下文的逻辑问题，按以下顺序排查：

• 检查路由文件的匹配顺序，有没有通配符路由（比如/varer/*）写在了/getproducts路由前面，导致请求先被通配符路由匹配到、提前返回了一次响应，后续又进入/getproducts路由二次返回内容
• 检查当前路由回调内是否有其他分支也触发了res.send、res.json等返回响应的方法，且没有加return中断后续代码执行
• 修正后的控制器代码参考：

router.get("/getproducts", (req, res) =>{
    console.log(products)
    // 加return避免后续代码继续执行触发二次响应
    return res.send(products)
})

二、前端修复（解决表格无法渲染的兼容问题） #

你目前的前端代码哪怕接口调通也无法正常展示表格，需要修改varer.js的逻辑：

1. forEach生成的HTML字符串没有追加到表格DOM中，属于无效生成
2. 图片标签没有闭合，会导致HTML解析异常
3. 同时混用await和.then写法混乱，统一异步逻辑更易维护

修改后的varer.js代码：

let refresh = document.getElementById('refresh')
let list = document.getElementById('mytable');

refresh.addEventListener('click', async ()=> {
  list.innerHTML = `
  <tr>
  <th>varer</th>
  <th>pris</th>
  <th>billede</th>
  </tr>
  `;
  try {
    const res = await fetch('http://localhost:8200/varer/getproducts', {
      method: 'GET'
    })
    const productList = await res.json()
    console.log(productList)
    // 遍历生成行追加到表格中
    productList.forEach((e) => {
      list.innerHTML += `
      <tr>
      <td>${e.varer}</td>
      <td>${e.pris}</td>
      <td><img src="${e.billede}" style="height:50px;width:50px;"></td>
      </tr>
      `;
    });
  } catch(err) {
    console.error('请求失败：', err)
  }
})

另外你的varer.html多了一个多余的</body>闭合标签（<script type="module" src="varer.js"></script>后面的那个），删掉即可避免HTML解析异常。

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