mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-11 00:23:53 +00:00
docs: add a section about useRequestFetch
and event.$fetch
(#29099)
This commit is contained in:
parent
61b5ef7850
commit
d970da6da5
@ -347,6 +347,22 @@ export default defineEventHandler((event) => {
|
||||
})
|
||||
```
|
||||
|
||||
### Forwarding Context & Headers
|
||||
|
||||
By default, neither the headers from the incoming request nor the request context are forwarded when
|
||||
making fetch requests in server routes. You can use `event.$fetch` to forward the request context and headers when making fetch requests in server routes.
|
||||
|
||||
```ts [server/api/forward.ts]
|
||||
export default defineEventHandler((event) => {
|
||||
return event.$fetch('/api/forwarded')
|
||||
})
|
||||
```
|
||||
|
||||
::note
|
||||
Headers that are **not meant to be forwarded** will **not be included** in the request. These headers include, for example:
|
||||
`transfer-encoding`, `connection`, `keep-alive`, `upgrade`, `expect`, `host`, `accept`
|
||||
::
|
||||
|
||||
## Advanced Usage
|
||||
|
||||
### Nitro Config
|
||||
|
52
docs/3.api/2.composables/use-request-fetch.md
Normal file
52
docs/3.api/2.composables/use-request-fetch.md
Normal file
@ -0,0 +1,52 @@
|
||||
---
|
||||
title: 'useRequestFetch'
|
||||
description: 'Forward the request context and headers for server-side fetch requests with the useRequestFetch composable.'
|
||||
links:
|
||||
- label: Source
|
||||
icon: i-simple-icons-github
|
||||
to: https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/composables/ssr.ts
|
||||
size: xs
|
||||
---
|
||||
|
||||
You can use `useRequestFetch` to forward the request context and headers when making server-side fetch requests.
|
||||
|
||||
When making a client-side fetch request, the browser automatically sends the necessary headers.
|
||||
However, when making a request during server-side rendering, because the request is made on the server, we need to forward the headers manually.
|
||||
|
||||
::note
|
||||
Headers that are **not meant to be forwarded** will **not be included** in the request. These headers include, for example:
|
||||
`transfer-encoding`, `connection`, `keep-alive`, `upgrade`, `expect`, `host`, `accept`
|
||||
::
|
||||
|
||||
::tip
|
||||
The [`useFetch`](/docs/api/composables/use-fetch) composable uses `useRequestFetch` under the hood to automatically forward the request context and headers.
|
||||
::
|
||||
|
||||
::code-group
|
||||
|
||||
```vue [pages/index.vue]
|
||||
<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>
|
||||
```
|
||||
|
||||
```ts [server/api/cookies.ts]
|
||||
export default defineEventHandler((event) => {
|
||||
const cookies = parseCookies(event)
|
||||
|
||||
return { cookies }
|
||||
})
|
||||
```
|
||||
|
||||
::
|
||||
|
||||
::tip
|
||||
In the browser during client-side navigation, `useRequestFetch` will behave just like regular [`$fetch`](/docs/api/utils/dollarfetch).
|
||||
::
|
Loading…
Reference in New Issue
Block a user