Express对接Spotify OAuth：跨域重定向后Cookie丢失致state验证失败

问题核心 #

你遇到的Cookie丢失并非因为跳转到Spotify域名导致，而是Cookie配置不完整或Express中间件缺失，使得回调路由无法读取到之前设置的spotify_auth_state Cookie，进而触发state不匹配错误。

解决方案 #

1. 启用cookie-parser中间件 #

Express默认不会解析Cookie，必须通过cookie-parser才能读取req.cookies：

• 先安装依赖：

npm install cookie-parser

• 在Express应用中启用（需放在路由定义之前）：

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

app.use(cookieParser());

2. 修正Cookie配置参数 #

当前Cookie缺少path参数，导致仅在/login路由下生效，回调路由无法读取。调整配置：

app.get('/login', function(req, res) {
  var state = generateRandomString(16);
  console.log('Original state (generated in /login): ', state);

  let options = {
    maxAge: 24 * 60 * 60 * 1000,
    sameSite: 'lax',
    overwrite: true,
    path: '/', // 让Cookie在整个域名下的所有路径都可访问
    secure: process.env.NODE_ENV === 'production', // 生产环境HTTPS下设为true，本地HTTP设为false
    httpOnly: true // 可选：防止前端JS读取，提升安全性
  };

  res.cookie('spotify_auth_state', state, options);
  // 注意：res对象没有cookies属性，不要打印res.cookies，去浏览器开发者工具的Application标签查看Cookie是否设置成功

  var scope = 'user-read-private user-read-email';
  res.redirect('https://accounts.spotify.com/authorize?' +
    querystring.stringify({
      response_type: 'code',
      client_id: client_id,
      scope: scope,
      redirect_uri: redirect_uri,
      state: state
    }));
});

3. 备选方案：用Session存储State #

如果Cookie方案仍有问题，可使用express-session存储state，稳定性更强：

• 安装依赖：

npm install express-session

• 配置Session并修改路由：

const session = require('express-session');

app.use(session({
  secret: 'your-custom-secret-key', // 替换为你的自定义密钥
  resave: false,
  saveUninitialized: true,
  cookie: { 
    maxAge: 24 * 60 * 60 * 1000,
    sameSite: 'lax',
    secure: process.env.NODE_ENV === 'production'
  }
}));

// /login路由中存储state到session
app.get('/login', function(req, res) {
  var state = generateRandomString(16);
  req.session.spotify_auth_state = state;

  var scope = 'user-read-private user-read-email';
  res.redirect('https://accounts.spotify.com/authorize?' +
    querystring.stringify({
      response_type: 'code',
      client_id: client_id,
      scope: scope,
      redirect_uri: redirect_uri,
      state: state
    }));
});

// 回调路由中从session读取state
app.get('/request_tokens', function(req, res) {
  var code = req.query.code || null;
  var state = req.query.state || null;
  var storedState = req.session.spotify_auth_state;

  if (state === null || state !== storedState) {
    res.redirect('/#' +
      querystring.stringify({
        error: 'state_mismatch',
        state: state,
        stored_state: storedState
      }));
  } else {
    // 验证通过，继续执行令牌请求逻辑
    req.session.destroy(); // 验证后销毁session，避免重复使用
    // ... 你的令牌请求代码
  }
});

验证步骤 #

1. 启动应用后访问/login，打开浏览器开发者工具的Application标签，确认spotify_auth_state Cookie存在且Path为/。
2. 完成Spotify授权回调到/request_tokens时，检查Cookie是否保留，同时查看控制台输出的storedState是否与Spotify返回的state一致。

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