如何在Express中正确设置Cookie？API设置Cookie不生效如何解决

• CORS配置错误：默认CORS配置不允许携带凭证，且origin不能设置为通配符*，否则浏览器会拦截跨域响应的Set-Cookie头
• 重复CORS中间件冲突：你在全局和路由层分别注册了两次cors中间件，路由层的默认无凭证配置会覆盖全局配置，导致跨域校验失败
• Cookie属性不符合浏览器策略：跨域场景下Chrome等现代浏览器要求Cookie必须设置SameSite: None和Secure: true，否则会被自动拦截
• Cookie路径限制：未手动设置path属性时，Cookie默认仅在当前接口路径的同级及子路径下生效，访问其他路径时无法读取，表现为设置失败
• 前端请求未开启凭证携带：前端发跨域请求时未配置携带凭证参数，即使后端返回Set-Cookie头，浏览器也不会存储对应Cookie

第一步：修正后端CORS配置 #

移除路由上重复的cors()中间件，配置允许跨域凭证：

const cors = require('cors');
const corsOptions = {
  // 必须指定具体前端源，禁止使用*
  origin: "http://localhost:5173", // 替换为实际的前端访问地址
  // 开启跨域凭证允许，必开项
  credentials: true
}

第二步：修正Cookie配置与路由逻辑 #

var express = require('express');
var app = express();
const cookieParser = require("cookie-parser");

app.use(cookieParser());    
// 仅保留全局CORS中间件
app.use(cors(corsOptions))

app.use('/', function(req, res){
  // 本地HTTP调试配置
  res.cookie('test', 'hallo', { 
    maxAge: 1000 * 60 * 10, 
    httpOnly: true, 
    sameSite: 'Lax',
    path: '/' // 全局路径生效
  });
  // 线上HTTPS跨域场景使用以下配置
  // res.cookie('test', 'hallo', { 
  //   maxAge: 1000 * 60 * 10, 
  //   httpOnly: true, 
  //   sameSite: 'None',
  //   secure: true,
  //   path: '/'
  // });
  res.end('ok')
})

app.listen(3000, () => console.log('服务启动在3000端口'))

第三步：配置前端请求携带凭证 #

Axios请求配置 #

axios.get('http://localhost:3000', {
  // 开启跨域凭证携带
  withCredentials: true
})

Fetch请求配置 #

fetch('http://localhost:3000', {
  // 开启跨域凭证携带
  credentials: 'include'
})

打开浏览器开发者工具的「网络」面板，查看对应接口的响应头是否存在Set-Cookie字段，若存在但未存储，可查看「应用」面板下的Cookie存储和控制台的拦截警告，对应调整配置即可。

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