React+Axios对接NestJS会话认证时访问受保护接口返回403

核心问题 #

你手动存userId到Cookies完全没用——NestJS的session认证依赖后端设置的会话Cookie（通常是connect.sid这类标识），前端请求必须自动携带这个Cookie，后端才能通过它找到对应的request.session.userId。Postman默认会自动保存并携带Cookie所以测试正常，但React里Axios默认没开启这个配置。

具体修复步骤 #

1. 配置Axios自动携带Cookie #

在创建Axios实例时开启withCredentials，让所有请求自动带上后端设置的会话Cookie：

import axios from 'axios';

const api = axios.create({
  baseURL: '你的后端API地址',
  withCredentials: true, // 关键配置：开启Cookie自动携带
});

export default api;

后续所有接口请求（包括登录、/persons）都用这个实例发起。

2. 后端CORS必须允许Credentials #

检查NestJS的CORS配置，必须明确开启credentials: true，同时origin不能设为*（浏览器禁止带Cookie的请求使用通配符域名），要指定你的前端具体地址：

// main.ts中的CORS配置
async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.enableCors({
    origin: 'http://localhost:3000', // 替换成你的React前端地址
    credentials: true, // 允许跨域请求携带Cookie
  });
  await app.listen(3000);
}
bootstrap();

3. 删除前端手动存userId到Cookie的代码 #

你前端存的userId对后端session认证没有任何作用，反而会混淆逻辑，直接删掉这块冗余操作。

4. 验证会话Cookie是否正确设置 #

登录接口调用后，打开浏览器开发者工具（Application -> Cookies），检查是否存在后端返回的会话Cookie，且Domain、Path属性与后端地址匹配。

额外排查点 #

• 确认后端session存储配置正常（比如express-session的内存存储或Redis），Postman能正常工作说明这块大概率没问题，但可以核对下session的name、secret等参数。
• 检查Guard中的逻辑，确保是读取request.session.userId而非其他字段，避免字段名拼写错误。

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