Next.js 14前端无法接收Express.js后端res.cookie设置的Cookie

环境配置 #

• 前端：Next.js 14 App Router，运行地址 http://localhost:3000
• 后端：Express.js，运行地址 http://localhost:4000

问题说明 #

后端通过res.cookie无法向前端发送自定义Cookie，但Passport.js能正常设置connect.sid（会话ID）。需要明确自定义Cookie无法生效的原因，同时希望了解Cookie响应相关函数的作用，并为Cookie配置必要标识。

相关代码片段 #

后端CORS配置 #

app.use(cors({
  credentials: true,
  origin: 'http://localhost:3000'
}))

前端服务端API调用工具 #

import ky from "ky"
import { cookies } from "next/headers"

const cookieStore = cookies()

export const serverSideApi = ky.extend({
  prefixUrl: `${process.env.CLIENT_URL ?? "http://localhost:3000"}/api`,
  credentials: "include",
  headers: {
    cookie: cookieStore.toString(),
  },
  cache: "no-store"
})

后端设置自定义Cookie的接口函数 #

async function findUserBySession(req, res) {
  const userId = req.session.passport?.user
  const boardsCount = await KanbanBoard.count({ where: { ownerId: userId } })
  const user = await User.findByPk(userId, {
    include: [{
      model: Team,
      as: 'teams',
      through: { attributes: [] },
      attributes: ['id', 'name', 'profilePicture']
    }]
  })

  if (!user) {
    return res.sendStatus(404)
  }
  res.cookie('boardsCount', boardsCount || 0);
  return res.json(user)
}

前端Dashboard布局组件 #

import "@scss/styles.scss"

import { cookies } from "next/headers"
import { Manrope } from "next/font/google"
import { serverSideApi } from "@app/serverSideApi"
import StoreProvider from "@app/StoreProvider"
import DashboardHeader from "@components/client/ClientHeader"
import DashboardSidebar from "@components/client/ClientSidebar"
import Toast from '@components/Toast'

const manrope = Manrope({ subsets: ["latin"] })

export const metadata = {
  title: 'Client Dashboard',
  description: 'Generated by create next app',
}

export default async function DashboardLayout({ children }) {
  const user = await serverSideApi
    .get("users/me").then((res) => res.json())
    console.log(user)

  let team = null 
  if (user.currentTeamId) {
    team = await serverSideApi
      .get(`teams/${user.currentTeamId}`).then((res) => res.json())
  }

  const cookieStore = cookies()
  console.log(cookieStore)

  return (
    <html lang="en">
      <body className={manrope.className}>
        <StoreProvider user={user} team={team}>
          <div className="dashboard-wrapper">
            <DashboardSidebar />
            <div className="dashboard-wrapper__body">
              <DashboardHeader />
              <main>
                {children}
              </main>
            </div>
          </div>
          <Toast />
        </StoreProvider>
      </body>
    </html>
  )
}

前端控制台输出的cookieStore内容 #

project-22/client:dev: f {
@project-22/client:dev:   _parsed: Map(1) {
@project-22/client:dev:     'connect.sid' => {
@project-22/client:dev:       name: 'connect.sid',
@project-22/client:dev:       value: 's:7TQyl4xxyWV7dtT1K8Q_LRXCuhryx_3N.svEY2TEf3PlY3j8oLFS6ukSYoiotls77cqmpJbCMwzQ'
@project-22/client:dev:     }
@project-22/client:dev:   },
@project-22/client:dev:   _headers: HeadersList {
@project-22/client:dev:     cookies: null,
@project-22/client:dev:     [Symbol(headers map)]: Map(0) {},
@project-22/client:dev:     [Symbol(headers map sorted)]: null
@project-22/client:dev: }

核心疑问 #

为什么通过res.cookie设置自定义Cookie后，前端响应中的cookies始终显示为null？同时希望能为自定义Cookie配置必要的标识（注：connect.sid由Passport.js自动设置）

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