透過 100 多個技巧來學習 Nuxt!

useRequestFetch

使用 useRequestFetch 組合式函式,轉發用於伺服器端擷取請求的請求上下文和標頭。

您可以使用 useRequestFetch 在發出伺服器端擷取請求時轉發請求上下文和標頭。

當發出客戶端擷取請求時,瀏覽器會自動發送必要的標頭。然而,在伺服器端渲染期間發出請求時,由於請求是在伺服器上發出的,因此我們需要手動轉發標頭。

不打算轉發的標頭不會包含在請求中。這些標頭包括,例如:transfer-encodingconnectionkeep-aliveupgradeexpecthostaccept
useFetch 組合式函式在底層使用 useRequestFetch 來自動轉發請求上下文和標頭。
<script setup lang="ts">
  // This will forward the user's headers to the `/api/foo` event handler
  // Result: { cookies: { foo: 'bar' } }
  const requestFetch = useRequestFetch()
  const { data: forwarded } = await useAsyncData(() => requestFetch('/api/cookies'))
  
  // This will NOT forward anything
  // Result: { cookies: {} }
  const { data: notForwarded } = await useAsyncData(() => $fetch('/api/cookies')) 
</script>
在客戶端導航期間,瀏覽器中的 useRequestFetch 行為將與普通的 $fetch 相同。