Nuxt3 ECONNREFUSED 刷新

Question

我正在使用Nuxt 3 升級一個公共 GitHub 存儲庫（我在私有存儲庫上使用它，我正在使用這個來幫助我進行項目遷移），但我在重新加載時遇到了一些獲取數據的問題。

我有一個反向代理來重定向到正確的 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 是。

Answer 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

我不知道技術答案，但我讓它工作。