MERN栈Passport Google认证跨域Cookie失效，咨询子域名部署方案

核心结论 #

不需要特意将后端部署在子域名、前端部署在主域名，只需调整Cookie配置和跨域相关设置即可解决问题。

当前配置的问题点 #

你当前的express-session配置中，cookie.domain设置为前端域名（process.env.CLIENT_URL）是错误的：

• Cookie的domain属性只能设置为后端服务自身的域名，或其上级公共域名（且不能是浏览器识别的公共后缀如vercel.app、render.com）。后端无法向前端域名写入Cookie，浏览器会直接阻止这类操作。

具体修复步骤 #

1. 修正Cookie的domain配置
   移除cookie.domain配置，让浏览器自动使用后端的域名（popupchat-backend.onrender.com）：

   app.use(
     session({
       secret: "secretcode",
       resave: false,
       saveUninitialized: true,
       cookie: {
         httpOnly: true,
         sameSite: "none",
         secure: true,
         maxAge: 1000 * 60 * 60 * 24 * 7, // One Week
       },
     })
   );
   

2. 配置CORS允许凭证传递
   后端必须明确指定允许的前端Origin，并开启凭证支持（不能使用*作为Origin）：

   const cors = require('cors');
   app.use(cors({
     origin: process.env.CLIENT_URL, // 即https://passport-frontend-seven.vercel.app/
     credentials: true
   }));
   

3. 前端请求携带凭证
   前端发起所有请求（包括Google OAuth回调后的接口请求）时，必须开启凭证传递：

   • 若使用Axios：

     axios.defaults.withCredentials = true;
     // 或单个请求配置
     axios.get('/api/user', { withCredentials: true });
     

   • 若使用Fetch：

     fetch('https://popupchat-backend.onrender.com/api/user', {
       credentials: 'include'
     });
     

4. 保留现有正确配置
   你已设置的sameSite: "none"、secure: true和app.set("trust proxy", 1)是正确的，适配了HTTPS跨域场景和Render的反向代理环境，无需修改。

关于同域名部署的说明 #

只有当你需要在多个子域名（如app.yourdomain.com和api.yourdomain.com）之间共享Cookie时，才需要将后端部署到子域名、前端部署到主域名，并将cookie.domain设置为主域名（如yourdomain.com）。当前跨域场景下完全不需要这样做。

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