生产环境下Next.js Middleware无法获取Cookie问题求助

本地环境中，Next.js中间件可正常从请求头获取token并在无token时重定向至登录页，Express后端设置Cookie的逻辑也正常。但部署至HTTPS生产环境后，该验证逻辑失效。

原Next.js中间件代码 #

export async function middleware(request: NextRequest) {
const token = request.headers.get('token')
console.log(token)
if (!token || token == undefined) {
return NextResponse.redirect(new URL('/login', request.url))
}
}

export const config = {
matcher: ['/admin/:path*']
}

原Express后端设置Cookie代码 #

res.cookie('token', response.token, { 
    maxAge: maxAges,
    httpOnly: false,
    secure: process.env.NODE_ENV === 'production',
    sameSite: 'none'
  })

问题核心原因 #

1. token获取逻辑不匹配：后端将token存入Cookie，但中间件错误地从请求头token字段读取，本地环境因同源策略宽松或测试时手动添加请求头token才巧合生效。
2. HTTPS跨域Cookie传输限制：生产环境HTTPS+跨域场景下，浏览器对Cookie传输有严格校验，需同时满足secure属性、sameSite配置及请求端携带凭证的要求。

具体修复步骤 #

1. 修正Next.js中间件的token读取逻辑

将从请求头获取改为直接读取Cookie：

export async function middleware(request: NextRequest) {
  const token = request.cookies.get('token')?.value;
  console.log(token);
  if (!token) {
    return NextResponse.redirect(new URL('/login', request.url));
  }
}

export const config = {
  matcher: ['/admin/:path*']
};

2. 确保前端请求携带凭证

无论使用fetch还是Axios，必须开启凭证携带才能让浏览器自动发送Cookie：

• fetch示例：

fetch('https://your-api-domain.com/api/auth', {
  credentials: 'include'
});

• Axios示例：

axios.get('https://your-api-domain.com/api/auth', {
  withCredentials: true
});

3. 完善Express后端的CORS与Cookie配置

• 配置CORS允许凭证：
  必须指定前端生产域名并开启凭证支持：

const cors = require('cors');
app.use(cors({
  origin: 'https://your-nextjs-domain.com', // 替换为你的Next.js生产域名
  credentials: true
}));

• 优化Cookie配置：
  针对跨域场景补充domain配置，同时区分环境设置sameSite：

res.cookie('token', response.token, { 
  maxAge: maxAges,
  httpOnly: false, // 若无需前端读取token，建议设为true提升安全性
  secure: process.env.NODE_ENV === 'production',
  sameSite: process.env.NODE_ENV === 'production' ? 'none' : 'lax',
  domain: process.env.NODE_ENV === 'production' ? '.your-main-domain.com' : undefined // 跨域子域名时设置
});

4. 处理浏览器第三方Cookie限制

若前后端为完全独立的不同域名，部分现代浏览器默认阻止第三方Cookie，可选择：

• 引导用户在浏览器设置中允许第三方Cookie（体验较差）
• 改用localStorage存储token，请求时手动放入请求头（需注意XSS风险，建议配合HttpOnly Cookie做CSRF防护）

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