Nuxt 3的$fetch方法在使用golang服务器时无法工作吗?

huangapple go评论120阅读模式
英文:

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

问题

我知道这听起来非常愚蠢,而且服务器语言与这类问题无关,但请听我说。

我正在尝试使用$fetch()(或useFetch,没有区别)从我的本地服务器加载数据,但是我遇到了这个错误:

FetchError: fetch failed ()

没有提供任何其他细节。服务器正在使用Golang/Fiber运行。当我尝试通过Postman加载相同的端点时,一切正常:
Nuxt 3的$fetch方法在使用golang服务器时无法工作吗?

但是当我尝试在我的nuxt 3应用程序中加载相同的端点时:
Nuxt 3的$fetch方法在使用golang服务器时无法工作吗?

我得到了这个:
Nuxt 3的$fetch方法在使用golang服务器时无法工作吗?

但是我的golang服务器将其记录为成功:
Nuxt 3的$fetch方法在使用golang服务器时无法工作吗?

关于所有这些的更奇怪的事情是,如果我运行我的nodejs版本的完全相同的服务器(或任何其他随机API),我不会得到任何错误。

我非常确定我的服务器工作正常,但也许我丢失了一些标头或其他东西,这是express自动添加的?这是我的响应标头:
Nuxt 3的$fetch方法在使用golang服务器时无法工作吗?

我还检查了nodejs的响应标头:
Nuxt 3的$fetch方法在使用golang服务器时无法工作吗?

看起来问题不在那里。

我不知道发生了什么,也不知道在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:
Nuxt 3的$fetch方法在使用golang服务器时无法工作吗?

But when I try to load the SAME endpoint in my nuxt 3 application:
Nuxt 3的$fetch方法在使用golang服务器时无法工作吗?

I get this:
Nuxt 3的$fetch方法在使用golang服务器时无法工作吗?

But my golang server logging this as success:
Nuxt 3的$fetch方法在使用golang服务器时无法工作吗?

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:
Nuxt 3的$fetch方法在使用golang服务器时无法工作吗?

I also checked nodejs response headers:
Nuxt 3的$fetch方法在使用golang服务器时无法工作吗?

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", "*")

希望对你有帮助 Nuxt 3的$fetch方法在使用golang服务器时无法工作吗?

英文:

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 Nuxt 3的$fetch方法在使用golang服务器时无法工作吗?

huangapple
  • 本文由 发表于 2022年7月24日 20:23:25
  • 转载请务必保留本文链接:https://go.coder-hub.com/73098374.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定