headers

headers 函数允许您从服务端组件 (Server Component) 中读取 HTTP 传入请求的标头。

`headers()`

此 API 扩展了 Web Headers API。它是只读的，意味着您无法 set / delete 传出请求的标头。

import { headers } from 'next/headers'

export default function Page() {
  const headersList = headers()
  const referer = headersList.get('referer')

  return <div>Referer: {referer}</div>
}

须知:

headers() 是一个**动态函数 (Dynamic Function)，其返回值无法提前预知。在布局或页面中使用它将使路由在请求时选择动态渲染 (dynamic rendering)**。

API 参考

const headersList = headers()

参数

headers 不接收任何参数。

返回值

headers 返回一个只读的 Web Headers 对象。

Headers.entries(): 返回一个 iterator，允许遍历此对象中包含的所有键/值对。
Headers.forEach(): 对此 Headers 对象中的每个键/值对执行一次提供的函数。
Headers.get(): 返回一个 String 序列，包含 Headers 对象中给定名称标头的所有值。
Headers.has(): 返回一个布尔值，表示 Headers 对象是否包含某个特定标头。
Headers.keys(): 返回一个 iterator，允许遍历此对象中包含的所有键。
Headers.values(): 返回一个 iterator，允许遍历此对象中包含的所有值。

示例

与数据获取结合使用

headers() 可以与 Suspense 数据获取 (Suspense for Data Fetching) 结合使用。

app/page.js

import { headers } from 'next/headers'

async function getUser() {
  const headersInstance = headers()
  const authorization = headersInstance.get('authorization')
  // 转发授权标头
  const res = await fetch('...', {
    headers: { authorization },
  })
  return res.json()
}

export default async function UserPage() {
  const user = await getUser()
  return <h1>{user.name}</h1>
}

版本历史

版本	变更
`v13.0.0`	引入 `headers` 函数。

headers()

API 参考

参数

返回值

示例

与数据获取结合使用

版本历史

On this page

`headers()`