Next.js 15部署Vercel生产环境后Cookie验证异常求助

核心问题定位 #

生产环境下NextAuth的Cookie在内部API请求中无法被正确验证，导致API返回307重定向（未授权跳转至登录页），但本地环境因Cookie配置宽松可正常工作。

解决方案步骤 #

1. 修正NextAuth的Cookie生产环境配置 #

生产环境中必须严格配置Cookie的安全属性，否则浏览器会拒绝传递Cookie到API。在app/api/auth/[...nextauth]/route.js（或.ts）中调整配置：

export const authOptions = {
  providers: [GoogleProvider({
    clientId: process.env.GOOGLE_CLIENT_ID,
    clientSecret: process.env.GOOGLE_CLIENT_SECRET,
  })],
  cookies: {
    sessionToken: {
      name: `__Secure-next-auth.session-token`,
      // 生产环境必须开启secure，仅在HTTPS下传递
      secure: process.env.NODE_ENV === "production",
      // 同域名下用lax，跨子域名用none+secure
      sameSite: process.env.NODE_ENV === "production" ? "lax" : "lax",
      // 匹配Vercel域名，比如自定义域名填.your-domain.com，默认vercel域名填.your-project.vercel.app
      domain: process.env.NODE_ENV === "production" ? ".your-project.vercel.app" : undefined,
      path: "/",
      httpOnly: true,
    },
  },
  // 确保生产环境NEXTAUTH_URL正确
  secret: process.env.NEXTAUTH_SECRET,
};

2. 移除手动拼接Cookie的错误写法 #

Next.js在Server Component/Server Action中发起内部API请求时，会自动传递当前请求的Cookie，无需手动拼接。修改你的getCourses函数：

const getCourses = async (userId) => {
  try {
    const result = await fetch(`${apiUrl}/api/progress/${userId}`, {
      cache: 'no-store', // 禁用缓存避免旧会话干扰
    });

    if (!result.ok) {
      throw new Error(`请求失败：${result.status} ${result.statusText}`);
    }

    const data = await result.json(); 
    if (!Array.isArray(data)) {
      console.error("返回格式错误，期望数组但得到：", data);
      throw new Error("API响应格式无效");
    }
    
    return data;
  } catch(error) {
    console.error("获取课程数据失败：", error);
    throw error; // 抛出错误让上层处理
  }
};

如果是Client Component发起请求，需添加credentials: 'include'让浏览器自动传递Cookie：

const getCourses = async (userId) => {
  try {
    const result = await fetch(`${apiUrl}/api/progress/${userId}`, {
      credentials: 'include',
      cache: 'no-store',
    });
    // 后续处理同上
  } catch(error) {
    console.error(error);
    throw error;
  }
};

3. 检查Vercel环境变量 #

• 确保NEXTAUTH_URL设置为生产环境的完整域名（如https://your-project.vercel.app），NextAuth依赖此值生成正确的Cookie。
• 确保NEXTAUTH_SECRET已设置，生产环境必须使用自定义密钥，不能依赖默认值。

4. 验证API路由的授权逻辑 #

检查/api/progress/[userId]路由中的会话验证代码，确保getServerSession能正确解析Cookie：

import { getServerSession } from "next-auth/next";
import { authOptions } from "../auth/[...nextauth]/route";
import { NextResponse } from "next/server";

export async function GET(request, { params }) {
  const session = await getServerSession(authOptions);
  
  if (!session || session.user.id !== params.userId) {
    return NextResponse.redirect(new URL("/login", request.url), { status: 307 });
  }

  // 此处执行MongoDB查询逻辑
  const courses = await yourMongoDBQuery(params.userId);
  return NextResponse.json(courses);
}

内容的提问来源于stack exchange，提问作者Zakaria Aolad Aissa