NextJS迁移后HTTP-Only Cookie后端接收异常求助

核心原因 #

服务端组件（Server Component）运行在Next.js服务器环境，和客户端浏览器完全隔离，默认不会自动携带浏览器中存储的HTTP-Only Cookie，这是导致后端接收不到Cookie的主要原因。此外，NextAuth.js的默认Cookie配置、跨域设置也可能引发该问题。

具体解决方案 #

1. 修正NextAuth.js的Cookie配置

在authOptions.ts中明确配置Cookie属性，确保其能在服务端请求中正确传递：

import CredentialsProvider from "next-auth/providers/credentials"
import { authorize } from "@/oauth";

const providers = [
  CredentialsProvider({
    id: 'trainingTracker',
    name: "Training Tracker",
    credentials: {
      username: { label: "Username", type: "text", placeholder: "username" },
      password: { label: "Password", type: "password" },
    },
    authorize: authorize
  })
]

export const authOptions: any = {
  providers: providers,
  cookies: {
    sessionToken: {
      name: `__Secure-next-auth.session-token`,
      options: {
        httpOnly: true,
        sameSite: process.env.NODE_ENV === 'production' ? 'none' : 'lax', // 跨域环境设为none（需配合HTTPS）
        path: '/',
        secure: process.env.NODE_ENV === 'production',
        domain: process.env.NEXT_PUBLIC_APP_DOMAIN // 匹配后端Cookie的domain设置
      }
    }
  },
  session: {
    strategy: 'jwt'
  }
}

2. 服务端组件请求时手动携带Cookie

在服务端组件中，通过next/headers的cookies方法获取Cookie，手动添加到请求头：

import { cookies } from 'next/headers'

async function fetchBackendData() {
  const cookieStore = cookies()
  const authCookie = cookieStore.get('你的后端Cookie名称') // 替换为实际的Cookie名称

  const response = await fetch('https://你的后端API地址', {
    method: 'GET',
    headers: {
      ...(authCookie && { Cookie: `${authCookie.name}=${authCookie.value}` })
    },
    credentials: 'include'
  })

  if (!response.ok) throw new Error('请求失败')
  return response.json()
}

3. 统一前后端Cookie的SameSite和Domain设置

• 同域场景：将SameSite设为lax或strict，后端设置Cookie时无需指定额外domain；
• 跨域场景：SameSite设为none，后端必须启用HTTPS，且Cookie的domain设为前后端共享的父域名（如前端app.example.com、后端api.example.com，domain设为.example.com）；
• 后端设置Cookie时必须显式声明HttpOnly、Secure（生产环境）、SameSite、Domain属性。

4. 配置Next.js的CORS规则

如果前后端跨域，在next.config.js中添加CORS配置，允许携带凭证：

/** @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: process.env.NEXT_PUBLIC_BACKEND_DOMAIN },
          { key: 'Access-Control-Allow-Methods', value: 'GET,POST,PATCH,DELETE,PUT,OPTIONS' },
          { key: 'Access-Control-Allow-Headers', value: 'Content-Type,Authorization' }
        ]
      }
    ]
  }
}

module.exports = nextConfig

5. 验证授权流程的Cookie处理

检查@/oauth中的authorize函数，确保登录请求正确接收后端Cookie：

export async function authorize(credentials: any) {
  if (!credentials?.username || !credentials?.password) return null

  const response = await fetch('https://你的后端登录接口', {
    method: 'POST',
    body: JSON.stringify({
      username: credentials.username,
      password: credentials.password
    }),
    headers: { 'Content-Type': 'application/json' },
    credentials: 'include' // 关键：允许接收后端设置的Cookie
  })

  const user = await response.json()
  return response.ok ? user : null
}

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