如何解决Nuxt 3 useFetch中的NS_BINDING_ABORTED错误？

报错信息 #

TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11576:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  cause: ConnectTimeoutError: Connect Timeout Error
      at onConnectTimeout (node:internal/deps/undici/undici:8522:28)
      at node:internal/deps/undici/undici:8480:50
      at Immediate._onImmediate (node:internal/deps/undici/undici:8511:13)
      at process.processImmediate (node:internal/timers:476:21)
      at process.callbackTrampoline (node:internal/async_hooks:130:17) {
    code: 'UND_ERR_CONNECT_TIMEOUT'
  }
}

前端代码 #

await useFetch('/api/test', {
  method: 'POST',
  body: bodyInfos,
});

后端API代码 #

// server/api/test.post.js

// post to db
await fetch(SUPABASE_URL, {
  method: 'POST',
  headers: {
   apikey: SUPABASE_KEY,
   Authorization: `Bearer ${SUPABASE_KEY}`,
   'Content-Type': 'application/json',
  },
  body: JSON.stringify(testData),
}).catch((e) => console.log(e));

场景说明 #

开发分析工具时，在onMounted钩子中触发数据库写入请求，但出现两个异常：

1. 网络面板频繁弹出上述连接超时错误
2. 数据库被大量重复条目填充——原本预期API请求仅执行一次，但调整窗口大小后会重复发起数十次请求，Firefox和Chrome均存在该问题。

问题解答 #

1. 是否需要给请求头添加过期值？ #

不需要。当前错误是连接超时导致的，和请求头过期值（如Cache-Control）无关，添加这类参数解决不了超时和重复请求问题。

2. 该错误发生的根本原因是什么？ #

分两部分解析：

• 连接超时错误：后端调用Supabase的fetch请求超时，可能是Supabase服务响应缓慢、网络波动，或是服务器到Supabase的链路出现问题；另外后端的fetch仅做了错误捕获但未设置超时处理，请求会持续等待直到触发Node默认超时阈值，最终抛出该错误。
• 重复请求与重复数据：这是数据库出现大量重复条目的核心原因——onMounted中的请求逻辑，可能因框架热重载、响应式更新触发组件重新挂载，或是误将请求绑定到了窗口resize事件回调中，导致每次调整窗口都会重新触发请求；再加上前端因请求未得到响应就重复发起调用，最终造成数据库多次写入。

额外建议：后端fetch需添加超时配置，比如用AbortController设置超时时间，避免请求长期挂起；前端要确保请求仅执行一次，可通过标记变量（如isRequested）判断是否已发起请求，或检查是否将请求逻辑放入了会重复执行的生命周期/响应式回调中。

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