跨域部署后浏览器未正确设置后端Session Cookie问题

问题背景 #

项目组件：

• React前端，部署在netlify.app
• NodeJS（ExpressJS + express-session）后端，部署在render.com
  客户端与服务器分属不同域名，使用express-session实现登录/注册功能，需在客户端Cookie中存储sessionID。本地测试正常，但部署后Session功能失效：浏览器收到后端返回的Set-Cookie响应，却未按预期设置Cookie。补充发现：浏览器实际存储了Cookie，但归属为服务器域名（back-end-client.onrender.com），而非Set-Cookie指定的前端域名（front-end-client.netlify.app）。已关闭第三方Cookie拦截，多浏览器测试结果一致。

当前配置 #

服务器配置 #

app.use(session({
  name: 'session-cookie',
  secret: 'my-secret-key',
  resave: false,
  saveUninitialized: true,
  cookie: {
    httpOnly: false, // 尝试过true和false，无差异
    secure: (process.env.NODE_ENV == "DEPLOY"),
    sameSite: (process.env.NODE_ENV == "DEPLOY")? 'None':'Lax',
    domain: (process.env.NODE_ENV == "DEPLOY")? process.env.FRONT_URL.replace('https://', '') : undefined
  }
}));

app.use(
  cors({
    origin: (process.env.NODE_ENV == "DEPLOY")? process.env.FRONT_URL :'*' ,
    credentials: true, // 允许携带Cookie
  })
);

app.set('trust proxy', 1);

客户端请求配置 #

function fetchAPI (api_url,data){
    const options = (api_url.method === "POST")?
    {
        method: "POST",
        body: JSON.stringify(data),
        headers: {
          "Content-type": "application/json; charset=UTF-8"
        },
        credentials: 'include'
      }
      :{
        method: "GET",
        credentials: 'include'
      }

    return fetch(api_url.url, options     
    ).then((response) => { 
        if (!response.ok) {
            throw new Error("Network did not respond!");
        }
        return response.json();
    })
    .catch((error) => {
        console.error('Error fetching API:', error);
    });
}

异常响应/请求头 #

响应头（包含Set-Cookie） #

HTTP/2 200 
date: Sun, 17 Nov 2024 10:21:00 GMT
content-type: application/json; charset=utf-8
content-length: 43
cf-ray: 8e3efdc8eb033bbf-WAW
cf-cache-status: DYNAMIC
access-control-allow-origin: https://front-end-client.netlify.app
content-encoding: br
etag: W/"27-bu5Ogz2a8jO3ftOvJz7bvL0wXFc"

set-cookie: session-cookie=s%3AM-rccgHt_RGQyWfbIGrE_qyoWl_Sb1BU.zwMbyHDogXN31prfcisOOF%2BDuVBjAOZJ11uqLsiNqAo;
Domain=front-end-client.netlify.app; Path=/; Secure; SameSite=None

vary: Origin, Accept-Encoding
access-control-allow-credentials: true
rndr-id: 63e2a4b5-5185-4d1a
x-powered-by: Express
x-render-origin-server: Render
server: cloudflare
alt-svc: h3=":443"; ma=86400
X-Firefox-Spdy: h2

请求头 #

POST /api/login HTTP/2
Host: back-end-client.onrender.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:132.0) Gecko/20100101 Firefox/132.0
Accept: */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br, zstd
Content-type: application/json; charset=UTF-8
Content-Length: 27
Origin: https://front-end-client.netlify.app
DNT: 1
Sec-GPC: 1
Connection: keep-alive
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site
Priority: u=0
Pragma: no-cache
Cache-Control: no-cache

解决方案 #

1. 移除Cookie的Domain配置 #

后端服务器（render.com域名）没有权限设置前端域名（netlify.app）下的Cookie，浏览器会忽略这个非法配置，转而默认使用服务器域名存储Cookie，这就是你看到的异常现象。修改session配置：

cookie: {
  httpOnly: true, // 建议设为true，提升安全性，不影响跨域Cookie传递
  secure: process.env.NODE_ENV === "DEPLOY",
  sameSite: process.env.NODE_ENV === "DEPLOY" ? 'None' : 'Lax',
  // 移除domain配置，让浏览器自动使用服务器域名
}

2. 调整中间件顺序 #

app.set('trust proxy', 1)必须放在session配置之前，否则express-session无法正确识别请求的真实协议（HTTPS），可能导致secure Cookie设置异常。正确顺序如下：

// 1. 先设置信任代理，适配Render的反向代理环境
app.set('trust proxy', 1);

// 2. 再配置CORS，处理跨域请求
app.use(
  cors({
    origin: process.env.NODE_ENV === "DEPLOY" ? process.env.FRONT_URL : '*',
    credentials: true,
  })
);

// 3. 最后配置session
app.use(session({
  name: 'session-cookie',
  secret: 'my-secret-key',
  resave: false,
  saveUninitialized: false, // 建议设为false，避免创建未初始化的session
  cookie: {
    httpOnly: true,
    secure: process.env.NODE_ENV === "DEPLOY",
    sameSite: process.env.NODE_ENV === "DEPLOY" ? 'None' : 'Lax',
  }
}));

3. 理解跨域Cookie的正常行为 #

跨域场景下，session Cookie会存储在后端服务器的域名下，这是正常且符合浏览器安全策略的行为。当前端再次发起请求到后端域名时，浏览器会自动携带该Cookie，express-session就能正确识别用户session。你之前试图将Cookie存储在前端域名下的做法不符合浏览器同源策略，无法实现。

4. 验证客户端请求 #

确保所有跨域请求都保持credentials: 'include'配置，这样浏览器才会自动携带后端域名下的session Cookie。

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