Nuxt 3 SSR：useFetch() 在页面刷新时返回 null

Question

（在多次编辑我原来的问题后，我决定彻底修改它，使其更加清晰和简洁。这是根据StackOverflow 的建议。）

设置：

创建一个新的 Nuxt 3 项目：

pnpm dlx nuxi init test-project
cd test-project
pnpm i
pnpm run dev -o

app.vue像这样编辑：

<script setup>
const { data: thing } = useFetch("http://localhost:8000/things/1").then(res => {
  console.log(res)
  return res
})
</script>

<template>
  <div>
    <p>{{ thing }}</p>
  </div>
</template>

我添加了 console.log-statement 来跟踪提取发生的位置。

没有对配置进行任何更改。据我了解，Nuxt 3 默认为 SSR。

问题：

两种情况：

I. 当对代码进行更改app.vue并因此触发 HMR 时thing，将包含来自 API 的预期数据。

二. 但是，当浏览器刷新页面时thing将为空。段落标签将为空。

我的观察：

• 相同的行为适用于 useAsyncData()。
• 每次我触发 HMR（场景一）时，客户端都会向 API 发出请求并成功接收数据（如开发人员工具的网络选项卡中所示）。
• 每当我在浏览器中刷新页面（场景二）时，我都会在终端中收到一份控制台日志，在浏览器控制台中收到一份控制台日志。两者都包含状态代码 500 的错误和消息“fetch failed ()”。但是，根据网络选项卡，尚未发出客户端请求。
• 如果我使用$fetch它，它会将相同的错误记录到终端。然而，当请求在服务器端失败时，它会在客户端再次尝试成功，因此 API 数据将显示在页面上。

到目前为止我的结论：

在我看来，所有服务器端请求都会失败，所有客户端请求都会成功。

当$fetch服务器端失败时，它会抛出错误并在客户端重试。这正是我所期望的。但是，useFetch不useAsyncData要这样做。相反，错误会写入响应对象，并且不会发出客户端请求。（但这不是一个主要问题，因为我可以检查响应对象中的错误条目，并在需要时在客户端发出另一个请求。）

开放式问题：

为什么所有服务器端请求都失败？据我所知，Nuxt 服务器无法访问浏览器，因此无法访问 cookie 等。但这些是对本地托管 Laravel API 的简单 GET 请求，不需要身份验证。他们不需要 CSRF 或会话 cookie 就能成功。我可以使用没有 cookies 的 Postman 向 API 路由发出成功的请求。

这是因为我做错了什么吗？或者这是开发模式 ( ) 中的预期行为pnpm run dev？我在使用 Nuxt 2 时从未遇到过这个问题。

恐怕我错过了一些明显的东西。

谢谢你！

Answer 1

电线417。

尝试在 useFetch 请求中将您的 API 地址从“localhost”更改为“127.0.0.1”。它可能对你有帮助。

Answer 2

我对 nuxtjs v3.1.2 （当前版本）有同样的问题。看来确实是一个时间问题。我通过将 useFetch 函数包装在 nextTick 函数中来使其工作：

export default {
mounted(): {
   this.$nextTick(async () => {
      const {data, pending, error, refresh } = await useFetch('/...')
   }

}

或者如果您正在使用脚本设置

<script setup>
import { nextTick } from 'vue'

await nextTick()

const {data, pending, error, refresh } = await useFetch('/...')

</script>

Answer 3

确保您的 api 可以访问。您可以添加const { data, error } = useFetch(...)看看会发生什么。

nuxt 3.0.0 仍然可以与您的应用程序正常工作