Nuxt3中useFetch刷新页面返回fetch failed()错误求助

你的问题核心是页面刷新时服务端发起的useFetch请求失败，但客户端路由跳转时请求正常——这大概率是服务端环境无法访问目标API导致的，因为Nuxt3默认会在SSR阶段（刷新页面时）先在服务端执行useFetch，而路由跳转时是客户端执行请求。下面是具体排查和解决方法：

快速临时解决：强制在客户端请求 #

如果不需要SSR预渲染这个数据，可以直接让useFetch仅在客户端执行，这样刷新和跳转的请求环境一致：

<template>
{{data}}
</template>

<script setup>
const { data, pending, error, refresh } = useFetch('https://api.nuxtjs.dev/mountains', {
  method: "get",
  server: false // 禁用服务端请求，仅在客户端发起
});

console.log(data.value);
if (error.value) {
  console.log(error.value);
}
</script>

根本解决：排查服务端网络问题 #

如果需要SSR渲染数据，必须解决服务端无法访问API的问题：

• 本地开发环境：检查本地防火墙、代理或VPN设置——比如开启VPN后，Node.js进程（Nuxt服务端）可能无法通过代理访问外部API，尝试关闭VPN或配置Node的代理环境变量；
• 生产环境：检查服务器的出站网络策略，确认是否允许访问api.nuxtjs.dev的443端口；
• 验证服务端请求能力：在Nuxt的server/api目录下新建一个测试接口，直接调用目标API，看是否能成功返回数据，以此确认服务端网络是否正常：

// server/api/test-fetch.ts
export default defineEventHandler(async () => {
  try {
    const res = await fetch('https://api.nuxtjs.dev/mountains');
    const data = await res.json();
    return { success: true, data };
  } catch (err) {
    return { success: false, error: err.message };
  }
});

访问/api/test-fetch就能看到服务端请求的结果。

其他可能的修复方向 #

1. 添加请求重试：如果是偶尔的网络波动导致失败，可配置重试机制：

<script setup>
const { data, pending, error, refresh } = useFetch('https://api.nuxtjs.dev/mountains', {
  method: "get",
  retry: 3, // 失败重试3次
  retryDelay: 1000 // 每次间隔1秒
});
</script>

2. 自定义请求头：部分API会校验请求的User-Agent，服务端默认的UA可能被拒绝，可手动设置：

<script setup>
const { data, pending, error, refresh } = useFetch('https://api.nuxtjs.dev/mountains', {
  method: "get",
  headers: {
    'User-Agent': 'Nuxt SSR'
  }
});
</script>

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