本地localhost中Cookie正常，部署到Vercel生产环境后失效求助

一、Middleware 端 Cookie 设置问题（生产环境不生效核心原因） #

Vercel 生产环境为 HTTPS 协议，Cookie 必须配置 secure 属性才能被浏览器正常保存；同时未指定 path 会导致 Cookie 作用域受限。修改后的 Middleware 代码如下：

import { NextRequest, NextResponse } from "next/server";

export function middleware(req: NextRequest) {
  const existingCookie = req.cookies.get("app_id")?.value;
  if (existingCookie) return NextResponse.next();

  const requestHeaders = new Headers(req.headers);
  const app_id = requestHeaders.get("host")?.split(".")[0] || "";
  requestHeaders.set("app_id", app_id);

  const response = NextResponse.next({
    request: { headers: requestHeaders },
  });

  // 配置生产环境兼容的 Cookie 属性
  response.cookies.set("app_id", app_id, {
    path: "/", // 确保全站路由生效
    secure: process.env.NODE_ENV === "production", // HTTPS 环境强制开启
    sameSite: "lax", // 规避第三方 Cookie 限制
    maxAge: 60 * 60 * 24 * 7, // 可选：设置7天有效期
  });

  return response;
}

// 确保 Middleware 覆盖所有页面路由（排除静态资源与API）
export const config = {
  matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"],
};

二、页面端获取 app_id 的错误写法修复 #

原代码手动拆分 Cookie Header 的方式极易出错（多 Cookie 场景下会读取错误值），App Router 中 cookies() 已提供标准、可靠的获取方式，无需手动解析 Header。修改后的页面代码：

import { cookies } from "next/headers";

async function fetchMethod(category_id: string | number | boolean) {
  const url = "https://rest_api"; // 补全合法的 API 地址
  const app_id_cookie = cookies().get("app_id")?.value || "";
  
  console.log("app_id:", app_id_cookie);
  
  // 用 URLSearchParams 构建表单数据，避免字符串拼接的格式错误
  const bodyData = new URLSearchParams({
    contact_id: "",
    category: category_id.toString(),
    timestamp: Date.now().toString(),
  });

  const response = await fetch(`${url}/?app_id=${app_id_cookie}`, {
    method: "POST",
    body: bodyData,
    headers: {
      accept: "application/json",
      "Content-Type": "application/x-www-form-urlencoded",
    },
    cache: "force-cache",
  });

  // 增加错误处理，便于排查 API 请求问题
  if (!response.ok) {
    throw new Error(`API 请求失败: ${response.status}`);
  }

  return await response.json();
}

三、额外排查点 #

• Vercel 缓存问题：部署后若仍不生效，可在 Vercel 控制台强制清除缓存并重新部署。
• 自定义域名配置：若使用自定义域名，需将 Cookie 的 domain 属性设为 .yourdomain.com（注意前缀点），确保跨子域名时 Cookie 可共享。
• Middleware 执行顺序：若存在多个 Middleware，需确保当前设置 Cookie 的 Middleware 优先执行。

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