Next.js 13中Fetch请求无法携带Cookie的问题求助

一、客户端组件场景（你提到已添加"use client"） #

你遇到的Cookie未发送问题，大概率是以下几个原因导致，对应解决方案如下：

1. 修正客户端组件异步请求写法 #

在Next.js 13的客户端组件中，不能直接写async组件（React 18暂不支持客户端async组件），需要用useEffect+useState处理异步请求：

'use client'; // 必须放在文件最顶部，不能在任何代码之后
import { useState, useEffect } from 'react';

async function getToken() {
  const res = await fetch('http://localhost:8080/api/auth/token', {
    credentials: 'include',
    method: 'GET', // 明确请求方法，避免默认方法不匹配
  });
  if (!res.ok) return null;
  return res.json();
}

export default function Component({ children }) {
  const [token, setToken] = useState(null);

  useEffect(() => {
    const fetchToken = async () => {
      const tokenData = await getToken();
      setToken(tokenData);
    };
    fetchToken();
  }, []);

  // 你的其他业务逻辑

  return <div>{children}</div>;
}

2. 配置跨域规则 #

原CRA可能通过代理解决了跨域，但Next.js需要在next.config.js中配置跨域响应头，确保允许携带Cookie：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async headers() {
    return [
      {
        source: '/api/:path*',
        headers: [
          { key: 'Access-Control-Allow-Credentials', value: 'true' },
          { key: 'Access-Control-Allow-Origin', value: 'http://localhost:3000' }, // 替换成你的Next.js项目地址
          { key: 'Access-Control-Allow-Methods', value: 'GET,OPTIONS,PATCH,DELETE,POST,PUT' },
          { key: 'Access-Control-Allow-Headers', value: 'X-CSRF-Token, X-Requested-With, Accept, Content-Type' },
        ],
      },
    ];
  },
};

module.exports = nextConfig;

3. 检查Cookie的SameSite属性 #

如果后端设置的Cookie是SameSite=Strict，跨域请求时浏览器不会自动携带，需要后端将其改为SameSite=Lax（同站/部分跨域场景有效）或SameSite=None; Secure（完全跨域场景，必须配合HTTPS）。

二、服务端组件场景（你提到用cookies()获取到了Cookie但不知如何携带） #

在Next.js 13的服务端组件中，credentials: 'include'完全无效，因为服务端请求是服务器到服务器的通信，没有浏览器的Cookie上下文。需要手动将获取到的Cookie添加到请求头中：

import { cookies } from 'next/headers';

async function getToken() {
  // 获取客户端发送的所有Cookie，拼接成符合HTTP Cookie头格式的字符串
  const cookieString = cookies()
    .getAll()
    .map(cookie => `${cookie.name}=${cookie.value}`)
    .join('; ');

  const res = await fetch('http://localhost:8080/api/auth/token', {
    headers: {
      Cookie: cookieString, // 手动注入Cookie头
    },
  });

  if (!res.ok) return null;
  return res.json();
}

// 服务端组件可以直接是async函数
export default async function Component({ children }) {
  const token = await getToken();

  // 你的其他业务逻辑

  return <div>{children}</div>;
}

关键说明 #

• 服务端组件中，cookies()是Next.js提供的专属方法，只能在服务端组件或Server Actions中调用，用于获取客户端请求携带的Cookie。
• 服务器到服务器的请求不需要credentials选项，直接通过headers.Cookie传递即可。

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