即使包含凭据，Next.js 也不会通过 fetch 请求发送 cookie

Question

我正在开发一个 Next.js 应用程序，它最初是一个普通的 React 应用程序（使用 create-react-app 创建），我试图将带有 fetch 请求的 cookie 发送到我的服务器。但是，即使我在获取选项中设置了凭据：“包含”，cookie 也不会被发送。

完全相同的代码在“非”Next js 应用程序中工作。

我还添加了“使用客户端”选项。这些文件位于下一版本 13 的新“app”文件夹中。

更新1：这是我使用的一些代码：

async function getToken() {
  const res = await fetch(
    'http://localhost:8080/api/auth/token', {
      credentials: 'include'
    }
  );
  if (!res.ok) {
    return null;
  }
  return res.json();
}

export default async function Component({
  children
}) {

  const tokenData = getToken();
  const token = await tokenData;

  /* some other code */

  return {
    children
  }
}

更新 2：根据 Edgefish 的输入和进一步的实验，我承认在 Next.js 最高 12 的版本中，可以使用 getServerSideProps 等方法。但是，自从 Next.js 13 中引入“app”文件夹后，这些方法不再在“app”文件夹本身中运行（请参阅此链接）。我很想知道是否有办法使用服务器端组件将 cookie 合并到 Next.js 13 中的获取请求中。虽然可以使用 cookies 方法检索客户端发送的 cookie（请参阅此链接），但我不确定如何在后续的获取请求中包含该 cookie。请注意，只要组件是服务器组件，使用凭据：“include”就无效。

Answer 1

要在 Next 13 服务器端获取中包含 cookie：

1. 用cookies函数读取请求cookie

2. 将标头添加Cookie到服务器端获取请求

import { cookies } from "next/headers";

async function getData() {
  const response = await fetch(process.env.API_ENDPOINT, {
    headers: { Cookie: cookies().toString() },
  });
  return await response.json();
}