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

yqyhoc1h  于 2022-12-30  发布在  TypeScript
关注(0)|答案(3)|浏览(295)

我正在用nest.js作为后端开发一个next.js应用程序。现在,即使我在nest.js的main.ts文件中启用了cors,我也会遇到cors错误。
这是我的主要.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是一个对象,它有用户名和密码。
这里是错误。

我也尝试了其他StackOverflow问题的所有解决方案,但没有一个解决了我的问题,几天前它还有效,我不知道发生了什么。
我做错了什么?它已经把我逼疯了。如果你需要,我可以提供更多的代码。

kq4fsx7k

kq4fsx7k1#

如MDN Web Docs中有关CORS的说明所述,无论是允许源还是请求标头(或请求方法),都不能将通配符(*)与认证请求结合使用。更权威但可能更枯燥的来源是Fetch标准:
对于Access-Control-Expose-HeadersAccess-Control-Allow-MethodsAccess-Control-Allow-Headers响应标头,对于没有凭据的请求,值*计为通配符。对于此类请求,无法单独匹配标头名称或方法*
因此,代替

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

您应该完全避免通配符,并显式指定允许的源和允许的请求头,如下所示:

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

ejk8hzay2#

在我的例子中,我需要使用axios在请求头中传递content-type: application/x-www-form-urlencoded

9jyewag0

9jyewag03#

在我的示例中,我按照official docs(如下所示)在nestjs上启用CORS

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

但我仍然得到了CORS错误,因为一个CORS插件,我很久以前安装。
所以我关闭了浏览器中的“允许CORS”插件,错误就消失了。(如果你有任何类似的插件,请关闭它,看看它是否为你工作。)

相关问题