即使启用了 cors，Nest.js 也会给出 cors 错误

Question

我正在开发一个以 Nest.js 作为后端的 next.js 应用程序。现在，即使我在main.tsNest.js 文件中启用了 cors，我也会遇到 cors 错误。

这是我的 main.ts 文件。

    import { NestFactory } from '@nestjs/core';
    import { AppModule } from './app.module';
    import cookieParser from 'cookie-parser';
    
    async function bootstrap() {
      const app = await NestFactory.create(AppModule);
      if (process.env.APP_ENV !== 'production') {
        app.enableCors({
          allowedHeaders: '*',
          origin: '*',
          credentials: true,
        });
      } else {
        app.enableCors({
          origin: process.env.FE_URL,
          credentials: true,
        });
      }
    
      app.use(cookieParser());
      await app.listen(process.env.PORT || 5000);
    }
    bootstrap();

我也尝试了以下方法。

    import { NestFactory } from '@nestjs/core';
    import { AppModule } from './app.module';
    import cookieParser from 'cookie-parser';
    
    async function bootstrap() {
      const app = await NestFactory.create(AppModule);
      
      app.enableCors({
        allowedHeaders: '*',
        origin: '*',
        credentials: true,
      });
    
      app.use(cookieParser());
      await app.listen(process.env.PORT || 5000);
    }
    bootstrap();

我也尝试过这个

    app.enableCors({
      origin: 'http://localhost:3000',
      credentials: true,
    });

现在，从 中的前端_app.js，我定义 Axios 全局配置，如下所示。

    axios.defaults.baseURL = 'http://localhost:5000';
    axios.defaults.withCredentials = true;

然后在我的login.tsx文件中，我将请求发送到 Nest.js 应用程序，如下所示。

    const {data } = await axios.post('/auth/login', values);

这里的值是一个具有用户名和密码的对象。

这是错误。

我还尝试了其他 StackOverflow 问题中的所有其他解决方案。但他们都没有解决我的问题。它实际上在几天前就起作用了。我不知道发生了什么事。

我在这里做错了什么？现在它已经让我发疯了。如果您需要，我可以提供更多代码。

Answer 1

正如有关 CORS 的 MDN Web 文档中所解释的，您不能将通配符 ( *) 与凭据请求结合使用，无论是允许源头还是请求标头（或请求方法）。一个更权威（虽然可能更干燥）的资源是Fetch 标准：

对于Access-Control-Expose-Headers、Access-Control-Allow-Methods和Access-Control-Allow-Headers响应标头，该值*将被视为没有凭据的请求的通配符。对于此类请求，无法单独匹配标头名称或方法*。

因此，以下代码会产生一个功能失调的 CORS 中间件；你可能会说你的 CORS 中间件库应该阻止它的用户生成这样一个功能失调的 CORS 中间件，但遗憾的是它没有。

app.enableCors({
  allowedHeaders: '*',
  origin: '*',
  credentials: true,
});

相反，您应该完全避免使用通配符并显式指定允许的来源和允许的请求标头，如下所示：

app.enableCors({
  allowedHeaders: ['content-type'],
  origin: 'http://localhost:3000',
  credentials: true,
});