Express Session跨域场景下无法在浏览器设置Cookie问题求助

问题根源分析 #

• 前后端域名不统一：前端使用127.0.0.1:5500，但请求的后端地址是localhost:3000，浏览器会将这两个视为不同域名，拒绝保存跨域Cookie。
• secure: true配置冲突：本地开发使用HTTP协议，而secure属性要求仅在HTTPS环境下才会发送Cookie，导致Cookie无法被浏览器存储。
• sameSite: "none"的强制约束：当sameSite设为none时，必须配合secure: true使用，但本地HTTP环境不支持该组合，形成配置矛盾。

具体修改方案 #

后端调整 #

1. 统一CORS origin与前端域名，确保前后端域名一致（比如都用localhost或都用127.0.0.1）。
2. 适配本地开发环境调整session的Cookie配置，关闭secure并将sameSite设为"lax"。

修改后的后端代码：

const express = require("express");
const session = require("express-session");
const cors = require("cors");
const app = express();

// 统一origin为前端实际使用的域名，此处以localhost:5500为例
app.use(
  cors({
    origin: "http://localhost:5500",
    methods: ["GET", "POST", "PUT", "DELETE"],
    credentials: true,
  })
);
app.use(
  session({
    secret: "Secret tut",
    name: "tutorial",
    cookie: {
      maxAge: 60 * 60 * 24 * 1000,
      sameSite: "lax", // 本地开发用lax，生产HTTPS环境可改为none
      secure: false, // 本地HTTP环境关闭，生产HTTPS环境开启
    },
    resave: false,
    saveUninitialized: false,
  })
);

app.get("/:name", (req, res) => {
  const { name } = req.params;
  try {
    if (req.session.auth) {
      return res.send({ msg: `Hello ${req.session.auth}` });
    } else {
      req.session.auth = name;
      return res.send({ msg: `Helloo ${req.session.auth}` });
    }
  } catch (err) {
    return res.send(`Error found ${err}`);
  }
});

app.listen(3000, () => console.log("Started"));

前端调整 #

将请求地址的域名修改为与后端CORS origin一致的域名，同时补充JSON解析步骤以查看返回内容：

fetch("http://localhost:3000/myparam", {
  method: "GET",
  credentials: "include",
  mode: "cors",
  headers: {
    "Content-Type": "application/json",
  },
}).then((data) => data.json())
  .then(res => console.log(res))
  .catch((err) => console.log(err));

关键注意事项 #

• 跨域Cookie生效要求前后端协议、域名完全一致，端口不同不影响，但localhost和127.0.0.1会被浏览器判定为不同域名，必须统一。
• secure: true仅适用于HTTPS环境，本地开发用HTTP时必须设为false，上线到HTTPS环境后再开启。
• 若需使用sameSite: "none"（跨不同顶级域名场景），必须确保网站运行在HTTPS环境下，同时开启secure: true。

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