Next.js API代理请求中Cookie为空/未设置问题排查

使用Insomnia等工具发送请求时Cookie正常存在，但在Next.js应用的SSR模式下调用API接口时，Cookie读取结果为undefined。

Cookie设置逻辑（/pages/api/auth.ts） #

const cookies = new Cookies(request, response);
cookies.set("mhg-token", data.token, {
  httpOnly: true,
  path: '/',
  sameSite: "lax",
});

Cookie读取逻辑（/pages/api/[...path].ts） #

const cookies = new Cookies(request, response);
const authToken = cookies.get("mhg-token");

console.log(authToken);

已知正常工作的请求 #

• POST /api/auth：通过JSON请求体提交登录信息，成功将JWT令牌存入Cookie，浏览器开发者工具中可确认Cookie已创建
• GET /api/me：获取当前用户数据（需JWT认证），仅在Insomnia等工具中能正常返回数据

问题现象 #

在Next.js应用中完成登录（POST /api/auth）后，调用/api/me等接口时，后端API路由中读取到的mhg-token Cookie为undefined。

/pages/api/[...path].ts完整代码 #

import Cookies from "cookies";
import { NextApiRequest, NextApiResponse } from "next";
import getConfig from "next/config";

const { serverRuntimeConfig } = getConfig();
const { backendApiUrl } = serverRuntimeConfig;
const APPLICATION_JSON = "application/json";

export default async function handler(
  request: NextApiRequest,
  response: NextApiResponse
): Promise<void> {
  const url = request.url?.replace("/api/", "");
  const method = request.method;
  console.log(`Request ${method} ${request.url}`);
  try {
    const body = request.body;

    const cookies = new Cookies(request, response);
    const authToken = cookies.get("mhg-token");

    console.log(authToken);

    const headers: HeadersInit = {
      accept: APPLICATION_JSON,
      "Content-Type": APPLICATION_JSON,
    };

    if (authToken !== undefined) {
      headers.Authorization = `Bearer ${authToken}`;
    }

    const parameters: RequestInit = {
      method: method ?? "GET",
      headers: headers,
    };

    if (method === "POST" || method === "PUT") {
      parameters.body = JSON.stringify(body);
    }

    const serviceResponse = await fetch(`${backendApiUrl}/${url}`, parameters);

    const data = await serviceResponse.json();

    console.log(`Response: Status ${serviceResponse.status}`);

    if (serviceResponse.status !== 200) {
      console.log(data);
    }

    response.status(serviceResponse.status).json(data);
  } catch (error) {
    console.log(error);
    response.status(500).json({ error: error });
  }
}

解决办法 #

1. SSR请求手动传递Cookie #

在Next.js的getServerSideProps中调用API时，需要手动将请求头中的Cookie传递给内部API：

export async function getServerSideProps(context) {
  const res = await fetch(`${process.env.NEXT_PUBLIC_APP_URL}/api/me`, {
    headers: {
      Cookie: context.req.headers.cookie || ""
    }
  });
  const userData = await res.json();
  return { props: { userData } };
}

2. 配置Cookie的Domain属性 #

如果Next.js应用与后端API不在同一域名下，需为Cookie指定正确的domain，确保跨域时Cookie能被携带：

// 修改/auth.ts中的Cookie设置
cookies.set("mhg-token", data.token, {
  httpOnly: true,
  path: '/',
  sameSite: "lax",
  domain: "your-domain.com" // 根据实际域名调整，本地开发可设为"localhost"
});

3. 浏览器端请求添加credentials配置 #

如果是在客户端组件中调用API，需为fetch请求添加credentials: 'include'，确保浏览器自动携带Cookie：

// 客户端请求示例
const fetchUser = async () => {
  const res = await fetch('/api/me', {
    credentials: 'include'
  });
  const data = await res.json();
  return data;
};

4. 排查中间件或请求头修改 #

检查是否有其他自定义中间件修改了请求头，导致Cookie被意外移除；同时确认cookies库已正确安装（npm install cookies），API路由中request和response对象传递无误。

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