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>
}

import { headers } from 'next/headers'

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

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

须知：

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

API参考

const headersList = headers()

参数

headers不接受任何参数。

返回值

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

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

示例

与数据获取一起使用

headers() 可以与 Suspense for Data Fetching 结合使用。

import { Suspense } from 'react'
import { headers } from 'next/headers'

async function User() {
  const authorization = headers().get('authorization')
  const res = await fetch('...', {
    headers: { authorization }, // 转发授权头部
  })
  const user = await res.json()

  return <h1>{user.name}</h1>
}

export default function Page() {
  return (
    <Suspense fallback={null}>
      <User />
    </Suspense>
  )
}

IP 地址

headers() 可以用来获取客户端的 IP 地址。

import { Suspense } from 'react'
import { headers } from 'next/headers'

function IP() {
  const FALLBACK_IP_ADDRESS = '0.0.0.0'
  const forwardedFor = headers().get('x-forwarded-for')

  if (forwardedFor) {
    return forwardedFor.split(',')[0] ?? FALLBACK_IP_ADDRESS
  }

  return headers().get('x-real-ip') ?? FALLBACK_IP_ADDRESS
}

export default function Page() {
  return (
    <Suspense fallback={null}>
      <IP />
    </Suspense>
  )
}

除了 x-forwarded-for，headers() 还可以读取：

• x-real-ip
• x-forwarded-host
• x-forwarded-port
• x-forwarded-proto

版本历史

版本	变更
v13.0.0	引入了 headers。