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將是 null。段落標簽將為空。

我的觀察：

• 相同的行為適用於 useAsyncData()。
• 每次我觸發 HMR（場景 I.）時，客戶端都會向 API 發出請求並成功接收到數據（可以在開發人員工具的 .network 選項卡中看到）。
• 每當我在瀏覽器中刷新頁面時（場景 II.），我都會在終端和瀏覽器控制台中收到一份控制台日志。 兩者都包含狀態代碼為 500 的錯誤和消息“獲取失敗 ()”。 但是，根據 .network 選項卡，沒有發出客戶端請求。
• 如果我改為使用$fetch ，它會將相同的錯誤記錄到終端。 但是，當請求在服務器端失敗時，它會在客戶端再次嘗試成功，因此 API 數據將顯示在頁面上。

到目前為止我的結論：

在我看來，所有服務器端請求都失敗，所有客戶端請求都成功。

當$fetch在服務器端失敗時，它會拋出錯誤並在客戶端再次嘗試。 這是我所期望的。 但是， useFetch和useAsyncData不會以這種方式運行。 相反，錯誤會寫入響應 object，並且不會發出客戶端請求。 （但這不是主要問題，因為我可以檢查響應 object 中的錯誤條目，並在需要時在客戶端發出另一個請求。）

開放式問題：

為什么所有服務器端請求都失敗？ 我知道 Nuxt 服務器無法訪問瀏覽器，因此無法訪問 cookies 等。 但這些是對本地托管的 Laravel API 的簡單 GET 請求，不需要身份驗證。 他們不應該需要 CSRF 或會話 cookie 才能成功。 我可以成功請求 API 路由 Postman 沒有 cookies。

這是因為我做錯了什么嗎？ 或者這是開發模式下的預期行為（ pnpm run dev ）？ 我從來沒有遇到過 Nuxt 2 的這個問題。

恐怕，我錯過了一些明顯的東西。

謝謝你！

Answer 1

[更新節點]

我得到了和你一樣的錯誤，我的 API 沒有保護和完全公開，但也無法在 SSR 頁面加載上獲取數據。

我花了 1 天時間來查找錯誤，但也許這就是解決我的問題的方法，希望對您有所幫助：

在此處更新最新的 NodeJS LTS 版本： https://nodejs.org/en/

我將 NodeJS 版本從18.12 更新到 18.13 。 而我的問題就徹底解決了。

Answer 2

我遇到了同樣的問題，我確實嘗試了一些解決方法，比如設置超時或任意 useFetch() （正如 Turukawa 在評論中所建議的那樣），但成功仍然各不相同。

我確實發現使用 $fetch 似乎很穩定並且可以按預期工作。

編輯：我也曾嘗試更新到 Node v 18.13.0，但它沒有解決問題。

Answer 3

wire417。

嘗試在 useFetch 請求中將您的 API 地址從“localhost”更改為“127.0.0.1”。 它可能對你有幫助。

Answer 4

確保您的 api 可用。 您可以添加const { data, error } = useFetch(...)來查看會發生什么。

nuxt 3.0.0 仍將與您的應用程序一起正常工作