生产环境下Express Session Cookie无法在浏览器存储，本地正常（Express+React）

问题描述 #

我用npm create-react-app创建了React测试应用并部署在Vercel，用npm init搭建的服务器部署在Render.com。为解决跨域Cookie问题，将两者设置为同主域的子域名：应用地址为app.mydomain.online，API地址为api.mydomain.online。检查请求头中的Cookie信息无异常，但Cookie始终无法存储到浏览器中。

现有代码 #

服务器端代码（Express） #

const express = require("express");
const cors = require("cors");
const session = require('express-session');
const app = express();
require('dotenv').config();

const PORT = process.env.PORT;

app.use(express.json());
app.use(cors({
    origin: 'https://app.myDomain.online',
    methods: ["POST", "PUT", "GET", "OPTIONS", "HEAD"],
    credentials: true
}));

const oneDay = 1000 * 60 * 60 * 24;
app.set('trust proxy', 1) // trust first proxy
app.use(session({
  secret: 'keyboard cat',
  resave: false,
  saveUninitialized: true,
  cookie: { secure: true, sameSite: 'none' }
}));

app.get('/createSession', (req, res) => {
    req.session.user = 'user';
    res.send('new session is created');
});

app.get('/', (req, res) => {
    res.send('get sess')
});

app.get('/getSession', (req, res) => {
    if(req.session.user){
        res.send('active');
    }else{
        res.send('not active');
    }
});

app.listen(PORT, () => {
    console.log(`The server is running on port ${PORT}`);
});

React端代码 #

import React from 'react'
import { useEffect } from 'react';
import Axios from 'axios';

function Test() {
    
    useEffect(() => {
        Axios.get(' https://api.myDomain.online/createSession',
                  { withCredentials: true }
        );
    }, []);
    
    return (
        <div>Test</div>
    )
}

export default Test;

解决步骤 #

• 添加Cookie的domain属性：在session的cookie配置中明确指定主域，让浏览器知道Cookie属于mydomain.online下的所有子域。修改后的配置如下：

  cookie: { 
      secure: true, 
      sameSite: 'none',
      domain: '.mydomain.online' // 前缀的点用于匹配所有子域
  }
  

• 修正Axios请求URL的空格：React代码中请求URL开头存在多余空格，会导致请求地址无效，需删除该空格：

  Axios.get('https://api.myDomain.online/createSession', { withCredentials: true });
  

• 确认代理信任配置：已设置app.set('trust proxy', 1)，这一步正确，确保Express能识别Render反向代理后的HTTPS环境，让secure属性生效。
• 检查浏览器设置：确保浏览器未禁用Cookie，可通过开发者工具的「Application -> Cookies」面板查看是否有Cookie被标记为阻止状态。

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