NextJS前端无法接收ExpressJS后端Passport认证Cookie问题求助

问题 #

NextJS前端运行在localhost:3000，ExpressJS后端运行在localhost:3001，构建登录流程时：通过axios向后端发送登录请求，Passport认证成功（会话表已写入记录），前端完成跳转，但浏览器Inspect Element > Application > Cookies > localhost:3000中看不到Cookie，跳转至仪表板后调用/status接口返回未授权状态。Postman调用后端接口可正常接收Cookie，后续/status请求也能返回已授权。

问题分析与修复 #

1. 登录请求执行上下文错误 #

你的登录请求是在**Next.js API路由（服务器端）**中通过axios发送的，而非浏览器端。这导致会话Cookie被存储在服务器端的axios实例中，浏览器完全接收不到Cookie，后续自然无法携带Cookie发起请求。

修复方法：
将登录逻辑迁移至浏览器端（页面的客户端组件），直接在浏览器中向后端发起请求，确保Cookie被浏览器存储：

'use client';
import axios from 'axios';
import { useRouter } from 'next/navigation';

export default function LoginPage() {
  const router = useRouter();

  const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);
    const inputs = {
      username: formData.get('username') as string,
      password: formData.get('password') as string,
    };

    try {
      await axios.post(
        `${process.env.NEXT_PUBLIC_LOCAL_STATIC_BACKEND_URL}/api/auth/login`,
        inputs,
        { withCredentials: true }
      );
      router.push('/dashboard');
    } catch (err) {
      console.error('登录失败', err);
    }
  };

  return (
    <form onSubmit={handleLogin}>
      <input name="username" type="text" placeholder="用户名" />
      <input name="password" type="password" placeholder="密码" />
      <button type="submit">登录</button>
    </form>
  );
}

2. Cookie的SameSite与Secure配置冲突 #

本地环境为HTTP协议，但你设置了sameSite: "none"，而浏览器要求sameSite: "none"必须搭配secure: true（仅HTTPS环境有效），HTTP环境下浏览器会直接拒绝存储这类Cookie。

修复方法：
根据环境动态配置Cookie参数：

// Express Session配置修改
app.use(session({
  secret: process.env.EXPRESS_SESSION_SECRET || 'secret',
  resave: false,
  saveUninitialized: false,
  cookie: {
    maxAge: maxAge,
    // 本地HTTP环境用lax，生产HTTPS环境用none
    sameSite: process.env.NODE_ENV === 'production' ? "none" : "lax",
    // 生产环境设为true，本地设为false
    secure: process.env.NODE_ENV === 'production',
    httpOnly: true // 建议开启，提升安全性，不影响请求自动携带Cookie
  },
  store: postgreStore,
}))

3. 服务器端请求无法获取浏览器Cookie #

Dashboard页面的getServerSideProps在服务器端执行，此处的axios请求不会自动携带浏览器的Cookie（服务器端与浏览器为独立上下文）。

修复方法：
将浏览器的Cookie头手动传递给后端请求：

// getServerSideProps修改
export async function getServerSideProps(context: GetServerSidePropsContext) {
  const BACKEND_API_URL = process.env.RAILWAY_STATIC_BACKEND_URL || process.env.NEXT_PUBLIC_LOCAL_STATIC_BACKEND_URL;
  
  let msg;
  try {
    const user = await axios.get(`${BACKEND_API_URL}/api/auth/status`, {
      withCredentials: true,
      headers: {
        Cookie: context.req.headers.cookie || ''
      }
    });
    msg = user.data;
  } catch (err) {
    msg = err.response?.data?.msg || '未授权';
  }

  return {
    props: { msg }
  };
}

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