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

Question

我正在开发一个以nest.js 作为后端的next.js 应用程序。现在，即使我在我的 Nest.js 的 main.ts 文件中启用了 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);

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

这是错误。

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

我在这里做错了什么？现在它一直在驱使我。如果需要，我可以提供更多代码。

Answer 1

正如MDN Web Docs about CORS 中所述，您不能将通配符 (*) 与凭据请求一起使用，无论是允许来源还是请求标头（或请求方法）。 Fetch standard 是一个更权威但可能更枯燥的来源：

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

因此，而不是

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

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

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

Answer 2

就我而言，我遵循了official docs，上面写着在nestjs上启用CORS

const app = await NestFactory.create(AppModule);
app.enableCors();
await app.listen(3000);

但由于我很久以前安装的 CORS 插件，我仍然收到 CORS 错误。

所以我在浏览器中关闭了“允许 CORS”插件，错误就消失了。 （如果您有任何类似的插件，请将其关闭，看看它是否适合您。）