Skip to content
This repository has been archived by the owner on Apr 6, 2023. It is now read-only.

docs(api): add useRequestHeaders composable example #8833

Merged
merged 4 commits into from Nov 9, 2022
Merged
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
20 changes: 19 additions & 1 deletion docs/content/3.api/1.composables/use-request-headers.md
Expand Up @@ -5,7 +5,7 @@ description: "Use useRequestHeaders to access the incoming request headers."

# `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
// Get all request headers
Expand All @@ -18,3 +18,21 @@ const headers = useRequestHeaders(['cookie'])
::alert{icon=πŸ‘‰}
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 an `authorization` request headers to an isomorphic `$fetch` call.
Krutie marked this conversation as resolved.
Show resolved Hide resolved

```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 `cookie` from the client headers to the API.
Krutie marked this conversation as resolved.
Show resolved Hide resolved
::