使用Fetch发送带JSON体的POST请求时Http-Only Cookie失效问题

我之前也踩过一模一样的坑！核心问题在于带JSON请求体的POST属于浏览器认定的「复杂请求」，会触发OPTIONS预检流程，这时候如果Fetch配置或Express的CORS设置不到位，Cookie就不会被正确携带。下面一步步给你解决：

1. 修正Fetch请求配置 #

你必须显式指定credentials参数，确保Cookie能被携带。不管是同域还是跨域场景，这个配置都不能少：

fetch('/api/your-endpoint', {
  method: 'POST',
  credentials: 'include', // 跨域用这个，同域也可以用'same-origin'
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    // 你的请求体数据
    username: 'test',
    data: 'example'
  })
})
.then(res => res.json())
.catch(err => console.error(err));

这里的关键是credentials: 'include'——如果没加，哪怕是同域，当请求是复杂请求时，浏览器也不会自动携带Cookie。

2. 调整Express的CORS配置 #

因为发送JSON的POST会触发OPTIONS预检请求，你的Express服务器必须正确处理CORS，尤其是允许携带凭证：
首先确保安装了cors中间件：

npm install cors

然后在你的Express代码里这样配置：

const express = require('express');
const cors = require('cors');
const app = express();

// 配置CORS，注意origin不能用*，必须指定具体的前端域名
app.use(cors({
  origin: 'http://localhost:3000', // 换成你的前端地址，比如生产环境的域名
  credentials: true, // 允许携带凭证（Cookie）
  optionsSuccessStatus: 200 // 处理某些浏览器的预检响应状态兼容问题
}));

// 解析JSON请求体（这个不能忘，否则Express拿不到请求体内容）
app.use(express.json());

// 你的路由处理
app.post('/api/your-endpoint', (req, res) => {
  console.log('收到的Cookie:', req.cookies); // 现在应该能正常看到Cookie了
  res.json({ status: 'success' });
});

app.listen(5000, () => console.log('服务器运行在5000端口'));

⚠️ 重点提醒：origin不能设为*，因为当credentials: true时，浏览器不允许通配符的origin，必须指定具体的前端域名。

3. 检查Cookie的设置属性 #

确保你在服务器设置Cookie时，属性配置符合要求：

res.cookie('authToken', 'your-token-value', {
  httpOnly: true, // 必须，防止XSS攻击
  sameSite: 'Lax', // 同域请求没问题，如果是跨域需要设为'None'并加上secure（仅HTTPS环境可用）
  maxAge: 24 * 60 * 60 * 1000, // 有效期1天
  secure: process.env.NODE_ENV === 'production' // 生产环境开启HTTPS时设为true
});

如果是跨域场景，sameSite要设为'None'，同时secure: true（必须在HTTPS环境下），否则浏览器会阻止Cookie携带。

为什么去掉请求体就正常？ #

因为当你去掉请求体后，POST请求变成了「简单请求」（没有自定义Content-Type，或使用默认的application/x-www-form-urlencoded），浏览器不会发送OPTIONS预检，会自动携带Cookie。但一旦用了application/json的Content-Type，就变成了复杂请求，必须通过预检流程，这时候如果配置不到位，Cookie就会被拦截。

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