NestJS带JWT Cookie认证的CORS跨域错误求助

我正在开发一个预订系统，采用JWT认证并将其存储在Cookie中。但调用https://localhost:4000/auth/login接口时，从https://localhost:3000发起的请求触发CORS错误：当请求credentials模式为'include'时，响应头'Access-Control-Allow-Origin'不能为通配符'*'。

我已尝试配置credentials、https、httpOnly等选项但无效，以下是我的NestJS和React代码，请求帮助解决该问题：

NestJS代码

app.use(function (req: Request, res: Response, next: NextFunction) {
    res.header('Access-Control-Allow-Origin', [
      'https://127.0.0.1:3000/',
      'https://localhost:3000/',
      'https://127.0.0.1:3000',
      'https://localhost:3000',
    ]);
    res.header('Access-Control-Allow-Methods', 'GET, POST, PUT ,DELETE');
    res.header(
      'Access-Control-Allow-Headers',
      'Origin, X-Requested-With, Content-Type, Accept',
    );
    next();
  });

  app.enableCors({
    origin: [
      'https://127.0.0.1:3000/',
      'https://localhost:3000/',
      'https://127.0.0.1:3000',
      'https://localhost:3000',
    ],
    credentials: true,
    // methods: ['GET', 'POST'],
    // allowedHeaders: ['Content-Type', 'Authorization'],
    // maxAge: 86400,
  });
  await app.listen(4000);

React代码

const login = async () => {
    const requestOptions = {
      credentials: 'include',
      withCredentials: true,
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      path: '/',
      body: JSON.stringify({
        id: "ID",
        password: "PASSWORD"
      })
    };

核心问题是重复配置CORS规则，同时Origin列表包含多余斜杠导致匹配失败，最终服务器 fallback 到通配符触发错误。

NestJS 端修正 #

1. 移除手动添加的app.use CORS中间件——app.enableCors()是NestJS官方推荐的配置方式，重复配置会引发冲突。
2. 清理Origin列表，去掉末尾斜杠，确保和前端请求的Origin完全匹配。

修正后代码：

// 移除手动CORS中间件
app.enableCors({
  origin: [
    'https://127.0.0.1:3000',
    'https://localhost:3000',
  ],
  credentials: true,
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowedHeaders: ['Origin', 'X-Requested-With', 'Content-Type', 'Accept'],
});
await app.listen(4000);

React 端修正 #

1. 移除冗余的withCredentials: true，浏览器标准仅需credentials: 'include'。
2. 确保请求使用完整URL，path: '/'参数无效，需合并到请求地址中。

修正后代码：

const login = async () => {
  const requestOptions = {
    credentials: 'include',
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      id: "ID",
      password: "PASSWORD"
    })
  };
  // 使用完整接口URL发起请求
  const response = await fetch('https://localhost:4000/auth/login', requestOptions);
  // 后续业务逻辑处理
};

额外注意事项 #

• 确保前后端协议一致（同HTTPS或同HTTP），混合协议会导致CORS或Cookie存储失败。
• 设置Cookie时，需配置httpOnly: true、secure: true（HTTPS环境）、sameSite: 'none'（跨域场景），否则浏览器无法正确存储和携带Cookie。

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