跨容器部署下Express-Session无法向前端设置Cookie求助

我将前后端分别部署在不同容器中，尝试通过Express-Session从后端向前端设置Cookie，但始终无法成功。以下是原始配置与请求代码：

原始CORS配置 #

const corsOptions = {
  origin: [
    "https://myfrontend.a.run.app",
    "https://myfrontend.a.run.app/signup",
    "https://myfrontend.a.run.app/signin",
  ],
  methods: "GET,HEAD,PUT,PATCH,POST,DELETE",
  credentials: true, // If you are using cookies or sessions
  exposedHeaders: ["set-cookie"],
};

原始Express-Session配置 #

const sessionOptions = {
  name: "sessionCookie",
  secret: "mysecret",
  saveUninitialized: false,
  resave: false,
  cookie: {
    secure: true,
    httpOnly: true,
    domain: "myfrontend.a.run.app",
    maxAge: 1000 * 60 * 30,
    sameSite: "None",
  },
};

原始前端请求代码 #

import axios from "axios";

const config = {
  withCredentials: true,
  headers: {
    "Origin-Allow-Credentials": true,
    "Access-Control-Allow-Credentials": true,
  },
};

const endpoint = "https://mybackend.a.run.app/signup";

export default async function SignUp(
  username: string,
  password: string,
  email: string
) {
  return axios.post(endpoint,{username,password,email},config);
}

问题修复步骤 #

• 修正CORS的origin配置
  CORS的origin字段仅需配置前端根域名，无需包含具体路径。浏览器发送跨域请求时，Origin头仅携带域名部分，带路径的配置会导致匹配失败，进而拒绝Cookie设置。

• 修正Session Cookie的Domain配置
  原配置中domain: "myfrontend.a.run.app"错误，因为后端部署在mybackend.a.run.app，属于不同子域。需将domain改为共同主域.a.run.app（注意开头的点），这样所有子域均可共享该Cookie。

• 移除前端请求中的多余响应头
  Origin-Allow-Credentials和Access-Control-Allow-Credentials是后端返回的响应头，前端请求无需携带，仅保留withCredentials: true即可。

• 额外检查项

  1. 确保CORS中间件在Express-Session中间件之前挂载，先完成跨域校验再处理会话。
  2. 确认后端服务运行在HTTPS环境下（secure: true要求Cookie仅通过HTTPS传输）。

修改后的代码 #

修改后的CORS配置

const corsOptions = {
  origin: "https://myfrontend.a.run.app",
  methods: "GET,HEAD,PUT,PATCH,POST,DELETE",
  credentials: true,
  exposedHeaders: ["set-cookie"],
};

修改后的Express-Session配置

const sessionOptions = {
  name: "sessionCookie",
  secret: "mysecret",
  saveUninitialized: false,
  resave: false,
  cookie: {
    secure: true,
    httpOnly: true,
    domain: ".a.run.app",
    maxAge: 1000 * 60 * 30,
    sameSite: "None",
  },
};

修改后的前端请求代码

import axios from "axios";

const config = {
  withCredentials: true,
};

const endpoint = "https://mybackend.a.run.app/signup";

export default async function SignUp(
  username: string,
  password: string,
  email: string
) {
  return axios.post(endpoint, { username, password, email }, config);
}

内容的提问来源于stack exchange，提问作者Berat Genç