docs(api): add useRequestHeaders composable example (#8833)

Co-authored-by: Daniel Roe <daniel@roe.dev>
This commit is contained in:
Krutie Patel 2022-11-09 19:09:48 +10:00 committed by GitHub
parent aec07f4255
commit 14307d1327
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -5,7 +5,7 @@ description: "Use useRequestHeaders to access the incoming request headers."
# `useRequestHeaders` # `useRequestHeaders`
Within your pages, components, and plugins you can use `useRequestHeaders` to access the incoming request headers. You can use built-in `useRequestHeaders` composable to access the incoming request headers within your pages, components, and plugins.
```js ```js
// Get all request headers // Get all request headers
@ -18,3 +18,21 @@ const headers = useRequestHeaders(['cookie'])
::alert{icon=👉} ::alert{icon=👉}
In the browser, `useRequestHeaders` will return an empty object. In the browser, `useRequestHeaders` will return an empty object.
:: ::
## Example
We can use `useRequestHeaders` to access and proxy the initial request's `authorization` header to any future internal requests during SSR.
The example below adds the `authorization` request header to an isomorphic `$fetch` call.
```vue [pages/some-page.vue]
<script setup>
const { data } = await useFetch('/api/confidential', {
headers: useRequestHeaders(['authorization'])
})
</script>
```
::alert{icon=👉}
[Another example](/getting-started/data-fetching#example-pass-client-headers-to-the-api) shows how we can pass cookies from the initial request to another API route.
::