Next.js 14服务端组件中Fetch请求无法传递Cookie求助

你的问题核心在于：服务端组件是在Next.js服务器上执行的，它发起的fetch请求是从Next.js服务器发到你的后端，而不是从浏览器发的。浏览器里的Cookie存在客户端，不会自动传递到Next.js服务器发起的请求里，所以后端收不到。而Middleware能拿到Cookie，是因为它处理的是浏览器发给Next.js服务器的请求，这个请求本身就带着浏览器的Cookie。

解决办法很直接，手动把Next.js服务器收到的Cookie传给后端接口：

1. 从服务端组件的请求上下文里获取Cookie头
2. 在fetch请求里手动添加这个Cookie头

修改后的代码如下：

import { headers } from 'next/headers';
import { Suspense } from 'react';
import Loading from './your-loading-component-path';
import DashboardTableHeader from './your-header-component-path';

export default async function Page() {
  // 从当前请求的headers中取出Cookie
  const cookieHeader = headers().get('cookie');

  const research = await fetch("http://localhost:8080/research/get-all", {
    credentials: "include",
    headers: {
      // 若存在Cookie头，就附加到fetch请求中
      ...(cookieHeader && { Cookie: cookieHeader }),
    },
  });

  const json = await research.json();
  console.log(json);

  return (
    <Suspense fallback={<Loading />}>
      <DashboardTableHeader />
    </Suspense>
  );
}

额外注意事项 #

• 如果Next.js和后端域名/端口不同（哪怕都是localhost），后端需要配置正确的跨域规则：设置Access-Control-Allow-Credentials: true，且Access-Control-Allow-Origin要指定为你的Next.js域名（比如http://localhost:3000），不能用通配符*。
• credentials: "include"在服务端fetch中作用有限，但保留不影响，核心是手动传递Cookie头。

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