Search code examples
vue.jsgoaxiosfetchnuxt3.js

Nuxt 3 $fetch method doesn't work with golang servers?

UPD: you can check this yourself: https://github.com/Rusinas/nuxt-fetch-bug

I know I know this sounds stupid as hell and server language has nothing to do with such problems, but hear me out.

I am trying to load data from my local server using $fetch() (or useFetch, no difference), but I get this error:

FetchError: fetch failed ()

No any other details provided. Server is running using Golang/Fiber. When I am trying to load the same endpoint via Postman, everything is OK: enter image description here

But when I try to load the SAME endpoint in my nuxt 3 application: enter image description here

I get this: enter image description here

But my golang server logging this as success: enter image description here

The more weird thing about all this is that if I run my nodejs version of the exact same server (or any other random API), I don't get any error.

I am pretty sure that my server working 100% correct, but maybe I lost some header or something, which express put automatically? Here is my response headers: enter image description here

I also checked nodejs response headers: enter image description here

Doesn't seem like problem is there.

I have no idea what is happening and I don't know other methods to retrieve async data on server side in nuxt js. I have installed axios, but it throws random errors and works on client side for some reason, which makes using nuxt meaningless. However, axios can call this endpoint and returns my data, but only in browser (despite I call it in setup function without any hooks). I am thinking to switch career now

Solution

  • The problem was that fetch() didn't reconize localhost:9000 for some reason, but when I changed BASE_URL to 127.0.0.1:9000 it started to work

    I had the same error: FetchError: fetch failed ()

    Changing localhost in the url to 127.0.0.1 worked for me.

    Writing as a separate answer because some might not find it in the comments.