mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-24 14:45:15 +00:00
f26a801775
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: Daniel Roe <daniel@roe.dev>
38 lines
1.1 KiB
Markdown
38 lines
1.1 KiB
Markdown
---
|
|
title: "useRequestHeaders"
|
|
description: "Use useRequestHeaders to access the incoming request headers."
|
|
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 built-in [`useRequestHeaders`](/docs/api/composables/use-request-headers) composable to access the incoming request headers within your pages, components, and plugins.
|
|
|
|
```js
|
|
// Get all request headers
|
|
const headers = useRequestHeaders()
|
|
|
|
// Get only cookie request header
|
|
const headers = useRequestHeaders(['cookie'])
|
|
```
|
|
|
|
::callout
|
|
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 lang="ts">
|
|
const { data } = await useFetch('/api/confidential', {
|
|
headers: useRequestHeaders(['authorization'])
|
|
})
|
|
</script>
|
|
```
|