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

Nest.js is giving cors error even when cors is enabled

我正在开发一个 next.js 应用程序,以 nest.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);

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

这是错误。

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

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

MDN Web Docs about CORS, you cannot use the wildcard (*), whether it be to allow an origin or request headers (or request methods), in conjunction with credentialed requests. A more authoritative, but perhaps more dry, source is the Fetch standard 中所述:

For Access-Control-Expose-Headers, Access-Control-Allow-Methods, and Access-Control-Allow-Headers response headers, the value * counts as a wildcard for requests without credentials. For such requests there is no way to solely match a header name or method that is *.

因此,而不是

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

你应该完全避开通配符并明确指定允许的来源和允许的请求 headers,像这样:

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

在我的例子中,我遵循了 official docs 的说明,下面是在 nestjs

上启用 CORS
const app = await NestFactory.create(AppModule);
app.enableCors();
await app.listen(3000);

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

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