学习 Nuxt,包含 100+ 技巧合集!

useRequestFetch

使用 useRequestFetch composable 为服务端 fetch 请求转发请求上下文和标头。

您可以使用 useRequestFetch 在进行服务端 fetch 请求时转发请求上下文和标头。

当发起客户端 fetch 请求时,浏览器会自动发送必要的标头。然而,当在服务端渲染期间发起请求时,出于安全考虑,我们需要手动转发标头。

不应转发的标头不会包含在请求中。 这些标头包括例如:transfer-encodingconnectionkeep-aliveupgradeexpecthostaccept
useFetch composable 在底层使用 useRequestFetch 以自动转发请求上下文和标头。
<script setup lang="ts">
// This will forward the user's headers to the `/api/cookies` 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 完全相同。