Nuxt3 ECONNREFUSED 刷新

Question

I'm upgrading a pubblic GitHub repo (I use that base on a private one, I'm using this one to help me with the project migration) with Nuxt 3 but I'm having some issues fetching data on reload.

I have a reverse proxy to redirect to the correct docker image.

I'm using this code on the page:

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

the same goes if I use ...await useFetch... instead of the useAsyncData

Very simple but it seems to work only when I made some changes in the code and then see the page loaded with HMR, if I refresh the page I get the following error.

Error: request to http://localhost/api/message failed, reason: connect ECONNREFUSED 127.0.0.1:80 ()

that URL is perfectly working, if I copy and paste it I get the correct response, also as I said above, it does work if I made a change a change in the code and save the file, with HMR is working fine, it just doesn't work when I refresh the page.

I found out that I could do this

if (process.client && error.value) {
  await refresh()
}

but that still doesn't answer why on refresh that doesn't work but with HMR yes.

Answer 1

Apparently Nuxt3 and $fetch work differently, while in Nuxt2 a code like this work:

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

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

In Nuxt3 with $fetch you need to use the container name

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

These are the ENV

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

I don't know the technical answer but I make it work.