部署在GitHub Pages的React应用与Render后端的Cookie设置存储问题

核心问题分析 #

你的问题出在跨域场景下的Cookie配置错误，具体包括：

1. 错误设置了domain属性：前端部署在GitHub Pages（xxx.github.io），后端在Render（xxx.onrender.com），两者是完全独立的顶级域名，设置domain: '.onrender.com'会让浏览器认为该Cookie仅属于后端域名，前端页面无法存储或携带它。
2. 代理协议识别问题：Render是反向代理服务，Express默认不代理信任头，导致无法正确识别请求为HTTPS，进而影响secure属性的Cookie生效逻辑。

具体修复步骤 #

1. 移除Cookie的domain配置 #

生产环境下不要手动指定domain，让浏览器自动绑定后端的实际域名（xxx.onrender.com）。修改session配置中的cookie部分：

app.use(session({
    secret: '[SECRET]',
    resave: false,
    saveUninitialized: false,
    cookie: {
        httpOnly: true,
        secure: isProd,
        sameSite: isProd ? 'None' : 'Lax',
        // 移除domain配置，让浏览器自动匹配后端域名
        path: '/',
        maxAge: 1000 * 60 * 60 * 24 * 7
    }
}));

2. 添加代理信任配置 #

Render会通过代理头传递真实请求协议，需要让Express信任这些头部，确保它能正确识别HTTPS请求。在app初始化后添加：

// 信任Render反向代理，确保Express正确识别HTTPS协议
app.set('trust proxy', 1);

3. 确认前端配置有效性 #

你的Axios配置已正确设置withCredentials: true，这部分无需修改，只需确保生产环境下请求的是HTTPS地址即可。

验证方法 #

1. 部署修改后的后端服务
2. 打开浏览器开发者工具，进入Application -> Cookies -> 你的Render后端域名（如xxx.onrender.com），检查是否存在session Cookie
3. 发起前端请求时，查看Request Headers是否包含Cookie字段

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