英文:
Nuxt 3 $fetch method doesn't work with golang servers?
问题
我知道这听起来非常愚蠢,而且服务器语言与这类问题无关,但请听我说。
我正在尝试使用$fetch()(或useFetch,没有区别)从我的本地服务器加载数据,但是我遇到了这个错误:
FetchError: fetch failed ()
没有提供任何其他细节。服务器正在使用Golang/Fiber运行。当我尝试通过Postman加载相同的端点时,一切正常:
关于所有这些的更奇怪的事情是,如果我运行我的nodejs版本的完全相同的服务器(或任何其他随机API),我不会得到任何错误。
我非常确定我的服务器工作正常,但也许我丢失了一些标头或其他东西,这是express自动添加的?这是我的响应标头:
看起来问题不在那里。
我不知道发生了什么,也不知道在nuxt js中以服务器端的方式检索异步数据的其他方法。我已经安装了axios,但它会抛出随机错误,并且由于某种原因只在客户端上工作,这使得使用nuxt没有意义。然而,axios可以调用此端点并返回我的数据,但仅在浏览器中(尽管我在设置函数中调用它而没有任何钩子)。我正在考虑转行了。
英文:
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:
But when I try to load the SAME endpoint in my nuxt 3 application:
But my golang server logging this as success:
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:
I also checked nodejs response headers:
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
答案1
得分: 1
问题是fetch()不认识localhost:9000,但是当我将BASE_URL更改为127.0.0.1:9000时,它开始工作了。
我遇到了相同的错误:FetchError: fetch失败()
将url中的localhost更改为127.0.0.1对我有用。
我单独写一个答案,因为有些人可能在评论中找不到它。
英文:
> 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.
答案2
得分: 0
首先,我认为你在使用$fetch
的方式上有误,因为我看到Nuxt使用的是fetch
,例如:
const data = await fetch(endpoint, {
method: "GET",
mode: "cors"
})
.then(resp => resp.json())
至于服务器端,只需在响应中启用CORS头,像这样:
// 你可以用你想要的客户端替换星号。
c.Append("Access-Control-Allow-Origin", "*")
希望对你有帮助
英文:
First I think you are using $fetch
in a wrong way, as I've seen Nuxt uses fetch
for example:
const data = await fetch(endpoint, {
method: "GET",
mode: "cors"
})
.then(resp => resp.json())
And for the server, just enable CORS header on the response, like this:
// you can replace the asterisk with the clients you want.
c.Append("Access-Control-Allow-Origin", "*")
hope I helped
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论