Nuxt3 ECONNREFUSED 刷新答案

【问题标题】：Nuxt3 ECONNREFUSED on refreshNuxt3 ECONNREFUSED 刷新
【发布时间】：2023-02-15 04:20:01
【问题描述】：

我正在使用 Nuxt 3 升级一个 pubblic GitHub repo（我在一个私有的基础上使用它，我正在使用这个来帮助我进行项目迁移），但是我在重新加载时遇到了一些获取数据的问题。

我有一个反向代理来重定向到正确的 docker 图像。

我在页面上使用此代码：

<script setup>
const runtimeConfig = useRuntimeConfig()
const { data: app, pending, error, refresh } = await useAsyncData(() => $fetch(`${runtimeConfig.public.BASE_API_BROWSER_URL}/message`))

如果我使用 ...await useFetch... 而不是 useAsyncData 也是一样

非常简单，但它似乎只有在我对代码进行一些更改然后看到加载了 HMR 的页面时才起作用，如果我刷新页面，我会收到以下错误。

错误：请求 http://localhost/api/message 失败，原因：connect ECONNREFUSED 127.0.0.1:80 ()

该 URL 工作正常，如果我复制并粘贴它，我会得到正确的响应，也正如我上面所说，如果我更改代码并保存文件，它确实有效，HMR 工作正常，它只是当我刷新页面时不起作用。

我发现我可以做到这一点
if (process.client && error.value) {
  await refresh()
}
但这仍然不能回答为什么在刷新时不起作用但使用 HMR 是。

【问题讨论】：

标签： nuxt.js nuxtjs3

【解决方案1】：

显然 Nuxt3 和 $fetch 的工作方式不同，而在 Nuxt2 中，这样的代码工作：

async asyncData ($axios, store, req }) {
  const userEmail = //get email from cookie

  await $axios
    .post(`${BASE_API_URL}/pages/settings`, {
      email: userEmail
    })
    more code...

在带有 $fetch 的 Nuxt3 中，您需要使用容器名称

<script setup>
const runtimeConfig = useRuntimeConfig()
const { data: app, pending, error, refresh } = await useAsyncData(() => $fetch(`${runtimeConfig.public.BASE_API_URL}/message`))

这些是环境

NUXT_PUBLIC_BASE_API_URL=http://webserver/api
NUXT_PUBLIC_BASE_API_BROWSER_URL=http://localhost/api

我不知道技术答案，但我让它工作。

【讨论】：

【解决方案2】：

非常感谢，我花了一整天的时间寻找解决这个问题的方法，终于找到了你对容器的评论

【讨论】：