Search
Docs Menu
API
Get Started
Edit this page

HTTP Headers

Request

You can access the headers of the HTTP request at:

  • pageContext.headers
  • pageContext.headersOriginal

pageContext.headers is a string object (Record<string, string>) normalized by Vike, and pageContext.headersOriginal is the original object (unknown) provided by your server.

For example:

// pageContext.headers
{
  'accept-encoding': 'gzip, br',
  'accept-language': 'en-US,en;q=0.9,fr;q=0.8',
  'cache-control': 'max-age=0',
  connection: 'Keep-Alive',
  cookie: 'username=brillout; admin=true'
}
 
// pageContext.headersOriginal
[
  ['Accept-Encoding', 'gzip, br'],
  ['Accept-Language', 'en-US,en;q=0.9,fr;q=0.8']
  ['Cache-Control', 'max-age=0'],
  ['Connection', 'Keep-Alive'],
  ['Cookie', 'username=brillout; admin=true']
]

You can convert it to a standard Headers object by using new Headers():

const headers = new Headers(pageContext.headers)

All values are merged. You can get the list of values as an array (string[]):

const acceptLanguage = pageContext.headers['accept-language']
  .split(',')
  .map(v => v.trimStart())

For getting the list of cookie values, you can use a cookie parser (e.g. cookie-parser).

The pageContext.headersOriginal value is defined at the renderPage() integration:

import { renderPage } from 'vike/server'
 
app.get('*', async (req: Request) => {
  const pageContextInit = {
    urlOriginal: req.url,
    // Defined here
    headersOriginal: req.headers
  }
  const pageContext = await renderPage(pageContextInit)
  // ...
})

Response

You can modify the HTTP response headers by using +headersResponse and/or pageContext.headersResponse.

⚠️
Both +headersResponse and pageContext.headersResponse are beta features: expect breaking changes in any minor version update. See #2554 - Stabilize +headersResponse and pageContext.headersResponse.
// pages/+config.ts
 
import type { Config } from 'vike/types'
 
// Statically adding header
export default {
  headersResponse: {
    'X-Powered-By': 'my-vike-app'
  }
} satisfies Config
// Dynamically adding/modifying header
pageContext.headersResponse.set('Set-Cookie', 'sessionId=abc123')
// Dynamically removing header
pageContext.headersResponse.delete('X-Powered-By')

pageContext.headersResponse is a standard Headers object.

You can access pageContext in any Vike hook and UI component — see API > pageContext.

The final HTTP response headers sent to the client are available at pageContext.httpResponse.headers.

import { renderPage } from 'vike/server'
 
// Server middleware
app.get('*', async (req: Request) => {
  // ...
  const pageContext = await renderPage(pageContextInit)
  // HTTP response headers sent to the client
  const headers = pageContext.httpResponse.headers
  // ...
})

See: API > renderPage()

It's a list of string tuples [string, string][] — for example:

[
  ['Content-Type', 'text/html;charset=utf-8'],
  ['Cache-Control', 'no-store, max-age=0']
]

You can convert it to a standard Headers object by using new Headers():

const headers = new Headers(pageContext.httpResponse.headers)

See also