Express跨域场景下res.json设置Cookie无效问题排查

我有一个login路由，希望在验证登录凭据后设置Cookie。客户端与服务器处于不同端口。

服务器代码如下：

const app = express();

app.use(
  cors({
    credentials: true,
    origin: true,
  })
);
app.use(cookieParser());

app.use('/login', (req, res) => {

  res.cookie('secureCookie', JSON.stringify({ id: 1 }), {
    secure: false,
    httpOnly: true,
  });

  return res.json({ success: true });
});

app.use('/check', (req, res) => {
  console.log(req.cookies);

  return res.json({ id: 1 });
});

问题：登录请求返回后，在开发者工具的Application标签中看不到该Cookie。此外，当使用credentials: 'include'请求check端点时，请求并未携带该Cookie。我哪里操作有误？

客户端请求代码：

fetch('http://localhost:4000/login');

  fetch('http://localhost:4000/check', {
    credentials: 'include',
  });

问题原因及解决方法 #

1. 登录请求未配置credentials: 'include' #

跨域场景下，浏览器默认会忽略服务器返回的Cookie，必须在所有涉及Cookie交互的跨域请求中明确设置credentials: 'include'，否则服务器返回的Cookie不会被浏览器存储。

2. CORS Origin配置建议明确指定 #

origin: true虽然能自动匹配请求来源，但明确指定客户端的完整地址（比如http://localhost:3000）更安全，也能避免部分浏览器的兼容性问题。

3. Cookie的sameSite属性配置不当 #

跨域场景下，默认的sameSite: Lax可能导致Cookie被浏览器拦截：

• 生产HTTPS环境：需设置sameSite: 'none'，且必须搭配secure: true（secure要求请求为HTTPS）；
• 本地HTTP开发环境：因secure: true仅支持HTTPS，可设置sameSite: 'lax'（确保客户端和服务器均为localhost域名），避免Cookie被拦截。

4. 路由使用方式不精准 #

app.use('/login', ...)会匹配所有以/login开头的请求，建议根据实际请求方法使用app.get('/login', ...)或app.post('/login', ...)，避免不必要的请求匹配。

修正后的代码示例 #

服务器端代码 #

const app = express();

// 替换为你的客户端实际地址
app.use(
  cors({
    credentials: true,
    origin: 'http://localhost:3000',
  })
);
app.use(cookieParser());

// 按请求方法定义路由
app.get('/login', (req, res) => {
  res.cookie('secureCookie', JSON.stringify({ id: 1 }), {
    secure: process.env.NODE_ENV === 'production', // 生产环境开启secure
    httpOnly: true,
    sameSite: process.env.NODE_ENV === 'production' ? 'none' : 'lax',
  });

  return res.json({ success: true });
});

app.get('/check', (req, res) => {
  console.log(req.cookies);
  const userId = req.cookies.secureCookie ? JSON.parse(req.cookies.secureCookie).id : null;
  return res.json({ id: userId });
});

客户端代码 #

// 登录请求同样需要携带credentials配置
fetch('http://localhost:4000/login', {
  credentials: 'include',
});

fetch('http://localhost:4000/check', {
  credentials: 'include',
});

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