使用ngrok隧道时Node.js Express服务无法为React前端设置认证Cookie

云上老周

2026-9-23

问题根因与修复步骤

1. 修正CORS配置语法错误

你现有CORS配置项之间缺失逗号，会导致配置解析异常：

// 错误写法
app.use(cors({
  origin: 'http://localhost:3000' // 此处缺逗号
  credentials: true,
}))
// 修正后
app.use(cors({
  origin: 'http://localhost:3000',
  credentials: true,
}))

2. 补全session与express代理配置

跨站场景下要让Cookie正常下发，需要同时开启以下配置：

// 新增全局配置，信任ngrok反向代理，放在session配置之前
app.set('trust proxy', 1);

app.use(session({
  secret: 'keyboard cat',
  resave: false,
  saveUninitialized: true,
  cookie: {
    httpOnly: true,
    expires: expiryDate,
    sameSite: 'none', // 跨站请求必须设为none
    secure: true // sameSite为none时必须同时开启secure，仅HTTPS下生效
  }
}))

3. 修正ngrok配置错误

你现有ngrok配置转发端口写为前端的3000，实际应该转发到后端服务端口，同时强制开启HTTPS隧道：

// ngrok.js中错误写法
const port = process.env.PORT || '3000';
// 修正为后端实际运行端口
const port = process.env.PORT || '4001';

// 开启强制HTTPS
let ngrok_config = {
    proto: 'http',
    bind_tls: true,
    name: process.env.NGROK_NAME,
    hostname: process.env.NGROK_CUSTOM_DOMAIN,
    authtoken: '', // 建议填写你自己的ngrok授权token，免费用户可在官网获取
    region: 'eu',
};

4. 修正控制器逻辑

express-session只有在你主动操作req.session时才会下发Set-Cookie头，空session不会返回Cookie：

async function authenticate (req, res) {
  try {
    // 主动写入session内容，触发Cookie下发
    req.session.user = {username: req.body.username};
    res.json({msg: '认证成功，Cookie已下发'});
  } catch (e) {
    console.log('Error', e)
    res.sendStatus(500)
  }
}

5. 修正前端请求头拼写错误

你现有Accept头拼写错误，可能导致响应解析异常：

// 错误写法
headers: {'Content-Type': 'application/json', Accept: 'application.json'},
// 修正后
headers: {'Content-Type': 'application/json', Accept: 'application/json'},

验证步骤

确保前端正常运行在HTTPS协议的localhost:3000下
启动后端后确认ngrok输出的是HTTPS格式的隧道地址，前端请求使用该地址
打开浏览器控制台网络面板，查看响应头是否携带Set-Cookie字段，同时查看Application面板的Cookie存储中是否存在对应的sessionId

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