Next.js部署后Middleware无法获取Cookie问题求助

问题核心 #

跨域部署后，后端设置的Cookie因缺少关键属性配置，导致浏览器虽能存储Cookie，但Next.js Middleware（运行在边缘节点）无法读取，进而触发认证失效。

具体修复步骤 #

1. 修正后端Cookie设置属性

在Express登录接口设置JWT Cookie时，必须添加跨域场景所需的关键属性，修改设置Cookie的代码：

// 登录成功后设置Cookie的逻辑示例
res.cookie('jwt', token, {
  httpOnly: true, // 推荐开启，防止XSS攻击，Middleware仍可读取
  secure: process.env.NODE_ENV === 'Production', // HTTPS环境强制开启
  sameSite: process.env.NODE_ENV === 'Production' ? 'none' : 'lax', // 跨域必须设为none
  maxAge: 30 * 24 * 60 * 60 * 1000, // 按需设置有效期
  // 若前后端为同主域下的子域名，可配置domain统一共享Cookie，例如：
  // domain: '.your-domain.com'
});

2. 完善Express的CORS配置

确保CORS配置的origin为精确的前端HTTPS域名（credentials: true时不能用通配符），并明确暴露Cookie相关响应头：

if (process.env.NODE_ENV === "Production") {
  corsOptions = {
    credentials: true,
    origin: process.env.ORIGIN_URL, // 必须是精确的前端域名，如"https://your-nextjs-app.com"
    exposedHeaders: ['Set-Cookie'], // 明确暴露Set-Cookie头，确保浏览器能处理
  };
} else {
  corsOptions = {
    credentials: true,
    origin: true,
  };
}

app.use(cors(corsOptions));

3. 优化Next.js Middleware逻辑

确保Middleware能正确处理请求并输出日志便于排查，修改后的代码：

import { NextResponse } from 'next/server';

const middleware = (req) => {
    const jwtCookie = req.cookies.get("jwt");
    console.log("Middleware读取到的JWT Cookie:", jwtCookie); // 部署后查看平台日志验证
    const url = req.url;

    if (!jwtCookie && url.includes("/dashboard")) {
        return NextResponse.redirect(`${process.env.NEXT_URL}/login`);
    }

    return NextResponse.next(); // 必须添加，否则会阻塞正常请求
};
export default middleware;

4. 验证部署配置

• 确认前后端环境变量ORIGIN_URL、NEXT_URL均为正确的HTTPS域名。
• 在浏览器开发者工具的Application -> Cookies中，检查jwt Cookie的Secure、SameSite=None属性是否已生效。

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