Nuxt.js 3中useFetch调用localhost失败，换127.0.0.1正常的原因

问题场景 #

后端是Python服务，提供/blogs接口。使用Nuxt.js 3的useFetch组合式函数调用http://localhost:8991/blogs时出现fetch失败错误，但改为调用http://127.0.0.1:8991/blogs就能正常运行。

核心原因解析 #

• DNS解析的不确定性：localhost是域名，需要通过DNS或本地hosts文件解析为IP地址。默认情况下hosts文件会将localhost指向127.0.0.1，但如果系统优先启用IPv6，localhost会被解析成::1（IPv6回环地址）。若你的Python服务仅监听IPv4的127.0.0.1、未开启IPv6监听，用localhost请求就会连接失败。而127.0.0.1是明确的IPv4回环地址，无需解析，直接走IPv4协议栈，能命中服务监听的地址。
• 服务绑定的IP范围限制：Python服务启动时，若绑定的是127.0.0.1而非0.0.0.0或localhost，则只会响应来自IPv4回环地址的请求。当localhost解析为IPv6的::1时，服务未监听该地址，自然无法建立连接。
• Nuxt SSR环境的配置差异：Nuxt.js 3的useFetch在SSR模式下会在服务器端发起请求，服务器端的DNS配置、hosts文件可能与客户端浏览器不同，导致localhost解析出错；而127.0.0.1是直接IP，不受这些配置影响，因此能正常请求。

代码示例 #

<template>
</template>

<script setup>
// 改用127.0.0.1后正常运行的代码
const { data, pending, error } = await useFetch('http://127.0.0.1:8992/blogs')
</script>

内容的提问来源于stack exchange，提问作者Prem Kumar G