`+headersResponse`

Environment: server

type Value =
  | Record<string, string>
  | [string, string][]
  // The standard Headers interface
  | Headers
type HeadersResponse =
  | Value
  | ((pageContext: PageContextServer) => Value | Promise<Value>)

Local

Provided by: vike

You can modify the HTTP response headers by using +headersResponse 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.js
 
// Statically adding header
export default {
  headersResponse: {
    'X-Powered-By': 'my-vike-app'
  }
}

// pages/+config.ts
 
import type { Config } from 'vike/types'
 
// Statically adding header
export default {
  headersResponse: {
    'X-Powered-By': 'my-vike-app'
  }
} satisfies Config

To add headers dynamically:

// pages/+headersResponse.js
 
export async function headersResponse(pageContext) {
  return {
    'some-dynamic-header': `the-page-url=${pageContext.urlPathname}`
  }
}

// pages/+headersResponse.ts
 
import type { PageContextServer } from 'vike/types'
 
export async function headersResponse(pageContext: PageContextServer) {
  return {
    'some-dynamic-header': `the-page-url=${pageContext.urlPathname}`
  }
}

Alternatively, you can use pageContext.headersResponse to dynamically add or modify headers:

// pages/+onBeforeRenderHtml.js
 
export function onBeforeRenderHtml(pageContext) {
  // Dynamically adding/modifying header
  pageContext.headersResponse.set('Set-Cookie', 'sessionId=abc123')
  // Dynamically removing header
  pageContext.headersResponse.delete('X-Powered-By')
}

// pages/+onBeforeRenderHtml.ts
 
import type { PageContextServer } from 'vike/types'
 
export function onBeforeRenderHtml(pageContext: PageContextServer) {
  // Dynamically adding/modifying header
  pageContext.headersResponse.set('Set-Cookie', 'sessionId=abc123')
  // Dynamically removing header
  pageContext.headersResponse.delete('X-Powered-By')
}

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

pageContext.headersResponse is a standard Headers object.

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) => {
  // ...
  const pageContext = await renderPage(pageContextInit)
  // HTTP response headers sent to the client
  const headers = 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)

+headersResponse

See also

`+headersResponse`