Nuxt 3 useFetch请求本地API返回NetworkError如何解决

• 最直接的触发原因：你传入的请求地址localhost:8077/my-url-here缺少http://协议前缀，请求库会将其识别为当前站点下的相对路径，不会发起真实的跨域/外部请求，这就是浏览器网络面板无任何请求记录的原因。你测试公共API能正常请求，就是因为公共API地址写了完整的https://协议前缀，符合fetch的URL格式要求。
• 附加潜在问题：useFetch默认会在SSR服务端渲染阶段、客户端激活阶段各执行一次请求，未做特殊配置时，服务端环境请求本地服务可能出现地址解析异常；就算URL格式正确，本地后端服务未配置CORS跨域头时，浏览器也会拦截客户端侧的请求，抛出网络错误。

1. 先修正URL格式，补全协议前缀，如果接口不需要在SSR阶段预取，加上server:false配置强制请求只在浏览器侧发起，此时就能在网络面板看到请求记录：

await useFetch(() => 'http://localhost:8077/my-url-here', { 
  method: 'POST',
  server: false
}).then((response) => {
    console.log(response)
})

2. 如果修正URL后出现跨域报错，二选一解决即可：
   • 给本地8077端口的后端服务添加CORS响应头，允许来自http://localhost:3000的请求。
   • 配置Nuxt代理（开发环境推荐，无需修改后端配置）：在nuxt.config.ts中添加代理规则，将指定路径的请求转发到本地后端服务：

export default defineNuxtConfig({
  // 其余已有配置保持不变
  routeRules: {
    '/api/**': {
      proxy: 'http://localhost:8077/**'
    }
  }
})

配置完成后，请求时直接使用相对路径即可，完全规避跨域问题，也不需要手动写死本地端口：

await useFetch(() => '/api/my-url-here', { method: 'POST' }).then((response) => {
    console.log(response)
})

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