MERN项目中使用express-session无法在客户端保存Cookie的问题

核心问题诊断 #

你的问题根源在于Session Cookie的Domain配置错误：当前后端设置的Cookie Domain为.frontend-domain.me，但你的前端和后端属于同一顶级域mydomain.me下的不同子域（frontend-domain.mydomain.me和backend-domain.mydomain.me），这个配置会导致浏览器只允许frontend-domain.me及其子域接收Cookie，后端所在的子域无法正确下发Cookie到前端。

修复步骤 #

1. 修正Session的Cookie Domain配置 #

修改服务端express-session的Cookie配置，将domain改为顶级父域.mydomain.me，这样所有子域都能共享该Cookie：

app.use(session({
    secret: process.env.SESSION_SECRET,
    resave: false,
    saveUninitialized: false,
    cookie: {
        domain: '.mydomain.me', // 改为顶级父域
        sameSite: 'none',
        secure: true,
        httpOnly: true,
        maxAge: 24 * 60 * 60 * 1000
    },
    store: store
}));

2. 确认CORS配置的准确性 #

确保CORS的origin是前端的完整HTTPS地址，且credentials: true已正确开启（你的现有配置符合要求，但需检查域名拼写是否准确）：

app.use(cors({
    origin: 'https://frontend-domain.mydomain.me', // 前端完整域名
    methods: ['GET', 'PUT', 'POST', 'DELETE'],
    allowedHeaders: ['X-PINGOTHER', 'Content-Type'],
    credentials: true,
    maxAge: 86400
}));

3. 修正前端Axios请求的目标地址 #

你当前的Axios请求路径/route/to/my/server是相对路径，会默认发送到前端域名下，需配置Axios指向后端域名：

// 方式1：全局配置Axios基础地址
axios.defaults.baseURL = 'https://backend-domain.mydomain.me';
axios.defaults.withCredentials = true;

// 方式2：单个请求使用完整地址
axios.post('https://backend-domain.mydomain.me/route/to/my/server', {
    email: this.state.email,
    password: this.state.password
}, { withCredentials: true })
.then(res => {
    // 业务处理逻辑
})
.catch(err => {
    // 错误处理
});

4. 验证浏览器Cookie接收情况 #

1. 打开Chrome开发者工具，切换到Network标签，查看登录请求的Response Headers，确认是否存在Set-Cookie头，且其中的Domain字段为.mydomain.me。
2. 切换到Application标签，在Cookies下选择前端域名，检查是否存在对应的Session Cookie。

额外注意事项 #

• 必须确保前后端都启用HTTPS，因为sameSite: 'none'要求Cookie的secure属性为true，只有HTTPS环境下浏览器才会保存这类Cookie。
• 不要随意修改浏览器的全局Cookie设置，这会导致测试结果失真，应通过代码配置解决问题。

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