Skip to content
This repository was 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 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 19 additions & 1 deletion docs/content/3.api/1.composables/use-request-headers.md
Original file line number Diff line number Diff line change
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 browser's `authorization` header to the server-side and also make sure that there are no unintended side effects during SSR.

The example below adds an `authorization` request headers 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 `cookie` from the client headers to the API.
::