NextJS客户端渲染场景下如何设置自定义HTTP请求头

通用解决方案：全局拦截客户端请求 #

Next.js客户端侧发起的所有渲染相关请求（包括路由跳转预取请求、客户端侧数据请求、内部API调用）默认走原生fetch实现，你可以在客户端入口处拦截全局fetch方法，动态注入session token：

代码实现 #

Pages Router 版本

在pages/_app.tsx中添加拦截逻辑：

import { useEffect } from 'react'
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  useEffect(() => {
    // 备份原始fetch方法
    const originalFetch = window.fetch
    window.fetch = async (...args) => {
      const [url, config = {}] = args
      // 从客户端存储读取token，可根据实际存储位置调整（比如sessionStorage、内存变量）
      const sessionToken = localStorage.getItem('your_session_token_key')

      // 合并请求头
      const modifiedConfig = {
        ...config,
        headers: {
          ...config.headers,
          'X-Session-Token': sessionToken || ''
        }
      }

      return originalFetch(url, modifiedConfig)
    }

    // 卸载时恢复原生fetch避免内存泄漏
    return () => {
      window.fetch = originalFetch
    }
  }, [])

  return <Component {...pageProps} />
}

App Router 版本

在app/layout.tsx中添加拦截逻辑，注意需要声明为客户端组件：

'use client'
import { useEffect } from 'react'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  useEffect(() => {
    // 和Pages Router完全一致的拦截逻辑
    const originalFetch = window.fetch
    window.fetch = async (...args) => {
      const [url, config = {}] = args
      const sessionToken = localStorage.getItem('your_session_token_key')
      const modifiedConfig = {
        ...config,
        headers: {
          ...config.headers,
          'X-Session-Token': sessionToken || ''
        }
      }
      return originalFetch(url, modifiedConfig)
    }
    return () => {
      window.fetch = originalFetch
    }
  }, [])

  return (
    <html lang="zh-CN">
      <body>{children}</body>
    </html>
  )
}

注意事项 #

• 如果你使用axios替代原生fetch，可以直接用axios的全局请求拦截器实现同样的逻辑
• 首次页面加载的服务端渲染请求由服务端发起，本身无法获取客户端存储的token，该方案仅覆盖客户端侧发起的后续所有渲染相关请求，符合需求场景
• 如果你的token存储在HttpOnly类型的Cookie中，不需要手动注入，浏览器会自动携带

内容的提问来源于stack exchange，提问作者Israel Obanijesu