Express.js会话Cookie无法在React客户端设置的问题求助

以下是针对问题的排查和解决方案：

1. Cookie SameSite设置过于严格 #

当前cookieSession配置的sameSite: 'strict'会在跨域场景（如React运行在localhost:3000、Express运行在localhost:5000）下，阻止浏览器在跨域请求中携带Cookie。这是Postman正常但React客户端失效的核心原因之一。

修改Express的Cookie配置：

app.use(
    cookieSession({
        name: "amtrix-session",
        keys: ["secret"],
        httpOnly: true,
        sameSite: 'lax', // 替换strict为lax，允许跨域导航类请求携带Cookie
        secure: process.env.NODE_ENV === 'production' // 生产环境开启，确保HTTPS下Cookie生效
    })
);

• 若生产环境使用HTTPS，可将sameSite设为'none'，但必须同时开启secure: true。

2. Axios请求体格式错误 #

React登录请求将参数嵌套在params对象中传递，但Express通过express.json()解析请求体时，会从req.body直接读取字段，而非req.body.params。这会导致后端无法获取正确的登录凭证，进而未生成会话Cookie。

修改React的Axios请求逻辑：

private async _callApi(path: string, params: any = {}) {
    const url = `${this._host}${path.startsWith("/") ? path : `/${path}`}`;
    try {
        return await axios.post(url, 
            params, // 直接将参数作为请求体传递，无需嵌套params
            {
                headers: {
                    'Content-Type': 'application/json'
                },
                withCredentials: true
            }
        );
    } catch(err: any) {
        throw err;
    };
};

3. 验证Origin配置准确性 #

确保process.env.ORIGIN的值与React应用的地址完全一致，比如开发环境应为http://localhost:3000（不要加末尾斜杠，不要包含额外路径）。Origin不匹配会导致CORS策略阻止Cookie传递。

4. 本地开发环境Cookie存储校验 #

• 确保React和Express均使用localhost作为域名（避免混用localhost和127.0.0.1）
• 登录后打开浏览器开发者工具，在Application -> Cookies下检查是否存在amtrix-session Cookie
• 调用GET /user/profile时，查看Network请求的Request Headers中是否包含Cookie字段

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