React应用调用API时Passport认证失败，res.isAuthenticated为false

这种情况我之前排查过好几次，核心原因基本都是跨域请求时没有正确携带登录后的Session Cookie——Postman会自动帮你管理并发送Cookie，但浏览器出于同源策略的限制，默认不会在跨域请求里带上Cookie，导致后端的Passport无法识别已登录的用户。

下面是一步步的解决方案：

1. 配置Axios允许携带凭证 #

在你的React项目里，给axios加上withCredentials配置，让它在跨域请求时自动携带Cookie：

// 全局配置（推荐）
import axios from 'axios';
axios.defaults.withCredentials = true;

// 或者单个请求单独配置
axios.get('/user/account', {
  withCredentials: true
})

2. 后端配置允许跨域携带凭证 #

如果你的Node后端用了cors中间件，必须指定具体的前端域名（不能用*），同时开启credentials选项：

const cors = require('cors');
app.use(cors({
  origin: 'http://localhost:3000', // 替换成你的React应用实际地址
  credentials: true
}));

这里要注意：如果origin设为*，浏览器会直接拒绝携带Cookie，这是很多人踩过的坑。

3. 检查Session Cookie的SameSite配置 #

如果你的前后端是完全跨域的（比如前端在localhost:3000，后端在localhost:5000），还需要调整session的Cookie配置：

app.use(session({
  secret: 'your-secret-key',
  resave: false,
  saveUninitialized: false,
  cookie: {
    httpOnly: true,
    // 生产环境设为none+secure，开发环境用lax
    sameSite: process.env.NODE_ENV === 'production' ? 'none' : 'lax',
    secure: process.env.NODE_ENV === 'production'
  }
}));

开发环境下secure必须设为false，因为http协议下secure的Cookie不会被发送；生产环境用https的话再开启secure: true。

为什么Postman能正常工作？ #

Postman不受浏览器同源策略的限制，它会自动保存登录接口返回的Cookie，并在后续请求中自动带上，所以后端能识别到已登录的用户。而浏览器在跨域场景下，必须通过上述配置才能允许携带Cookie。

按照上面的步骤配置完后，你再测试一下登录后调用/user/account接口，应该就能看到session里出现passport.user字段，isAuthenticated()也会返回true了。

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