NextJS 14中use client组件openapi-fetch请求Headers为空问题求助

你遇到的空请求头问题，核心是client初始化时只调用了一次getHeaders()：Next.js 14的客户端组件仍会经历服务端预渲染流程，此时window不存在，getHeaders()返回空对象；后续即使客户端sessionStorage已有令牌，这个初始的空headers也不会自动更新，导致部分请求不带令牌。

直接让createClient的headers参数接收一个动态函数，这样每次发起请求时都会重新读取sessionStorage中的令牌，彻底避免静态值带来的问题。同时因为是"use client"组件，请求只会在客户端实际发起，可简化window判断：

"use client";
import { paths } from "../../types/generated-types";
import createClient from "openapi-fetch";

const baseUrl = process.env.NEXT_PUBLIC_API_URL;

// 每次请求时动态读取令牌生成headers
const getHeaders = () => {
  const sesToken = sessionStorage.getItem("acce") || "";
  const idToken = sessionStorage.getItem("token") || "";
  const refreshToken = sessionStorage.getItem("token") || "";

  return {
    accessToken: sesToken,
    refreshToken: refreshToken,
    idToken: idToken,
  };
};

// 关键：headers传入函数，而非静态对象，每次请求都会自动调用该函数
const client = createClient<paths>({ 
  baseUrl, 
  headers: getHeaders
});

export const GET = client.GET;
export const PUT = client.PUT;
export const POST = client.POST;
export const PATCH = client.PATCH;
export const DELETE = client.DELETE;

• 如果令牌会在组件生命周期内更新（比如登录/登出操作），上述方案能自动获取最新值，无需额外处理。
• 若需要更精细的状态同步，可以结合useState和useEffect监听sessionStorage的变化，但对于绝大多数场景，动态函数的方式已经足够简洁高效。

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