React客户端Passport JS deserializeUser未调用，Postman正常问题排查

问题描述 #

React客户端配合Express后端（使用express-session、Passport、cors、body-parser组件）时出现以下问题：

• React调用登录状态检查接口GET /api/auth/is_logged_in或登出接口GET /api/auth/logout时，Passport的deserializeUser方法不触发；
• Postman测试相同接口时，deserializeUser正常调用，认证逻辑完全正常。

调试确认：

• Postman请求时，isLoggedIn中间件中req.session.passport包含用户ID，req.session.user存在用户信息，req.isAuthenticated()返回true；
• React客户端请求时，req.session.passport与req.session.user均不存在，req.isAuthenticated()返回false。

原因分析 #

1. 跨域请求未携带凭证：React跨域请求默认不会发送Cookie，导致服务器无法识别用户session；后端CORS配置未开启凭证支持，也会阻止Cookie的传递。
2. 前端请求路径错误：App.js中状态检查接口的URL写为/auth//is_logged_in，多余的斜杠会导致服务器无法匹配正确路由，跳过session验证逻辑。
3. 登录请求未保存Cookie：登录接口的fetch请求未配置凭证携带，导致登录成功后服务器设置的session Cookie未被浏览器保存，后续请求无法携带验证信息。

解决方案 #

1. 修正后端CORS配置 #

将全局CORS配置改为指定允许的前端域名，并开启凭证支持：

// 替换原有的app.use(cors());
app.use(cors({
  origin: process.env.FRONTEND_URL, // 例如http://localhost:3000，需和前端域名一致
  credentials: true
}));

⚠️ 注意：不能使用origin: "*"，该配置与credentials: true冲突，会导致Cookie无法传递。

2. 修正前端请求路径 #

将App.js中状态检查接口的URL里的多余斜杠去掉，同时添加凭证配置：

// 原代码
const response = await fetch(`${baseApi}/auth//is_logged_in`);
// 修改后
const response = await fetch(`${baseApi}/auth/is_logged_in`, {
  credentials: 'include'
});

3. 前端所有认证相关请求添加凭证配置 #

登录请求和状态检查请求都需要添加credentials: 'include'，确保Cookie被正确传递：

• 登录请求（logon.js）：

const response = await fetch(`${baseApi}/auth/login`, {        
  method: "POST",
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'            
  },           
  body: JSON.stringify(loginBody),
  credentials: 'include' // 添加此行
});

• 状态检查请求（App.js）：

const isLoggedIn = async () => {
  const response = await fetch(`${baseApi}/auth/is_logged_in`, {
    credentials: 'include' // 添加此行
  });
  return response.status === 200;
}

4. 优化Session配置（可选） #

调整session配置，适配开发和生产环境，同时遵循最佳实践：

app.use(session({
  secret: process.env.SESSION_SECRET || 'not_so_secret',
  resave: false, // 避免不必要的session重新保存
  cookie: {
    maxAge: 1000 * 60 * 60 * 24,
    secure: process.env.NODE_ENV === 'production', // 生产环境启用HTTPS时设为true
    httpOnly: true,
    path: '/',
    sameSite: process.env.NODE_ENV === 'production' ? 'none' : 'lax' // 跨域场景设为none
  },
  saveUninitialized: false // 不保存未初始化的session，符合隐私规范
}));

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