NestJS使cors能够投入生产

Question

我在官方教程之后在我的NestJS应用程序中启用了CORS ,所以我main.ts看起来如下:

import { FastifyAdapter, NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule, new FastifyAdapter(), { cors: true });
  await app.listen(3000);
}
bootstrap();

当我使用运行应用程序时,它工作npm run start:dev.

但是,当我尝试首先使用npm run webpack然后运行它来编译应用程序时node server.js,cors将无法工作.

来自客户端的http请求将失败:

对预检请求的响应未通过访问控制检查:请求的资源上不存在"Access-Control-Allow-Origin"标头.因此不允许来源' http:// localhost:8000 '访问.响应具有HTTP状态代码404.

Answer 1

如果您使用 graphql 运行 NestJs，您将遇到一个问题，即 Apollo 服务器将覆盖 CORS 设置，请参阅链接。下面解决了这个问题。我为此浪费了 8 个小时的生命。:-( 我希望你看到这个，你不要那样做。见链接和链接

        GraphQLModule.forRoot({
            debug: process.env.NODE_ENV !== 'production',
            playground: process.env.NODE_ENV !== 'production',
            typePaths: ['./**/*.graphql'],
            installSubscriptionHandlers: true,
            context: ({req}) => {
                return {req};
            },
            cors: {
                credentials: true,
                origin: true,
            },
        }),

然后在你的 main.ts 中：

        app.enableCors({
            origin: true,
            methods: 'GET,HEAD,PUT,PATCH,POST,DELETE,OPTIONS',
            credentials: true,
        });

Answer 2

cors 配置对象的文档位于： https: //github.com/expressjs/cors#configuration-options

我注意到没有人使用数组作为原点，所以万一有人想要一些快速复制意大利面

如果您想知道，我也研究过...... http 和 https 被认为是不同的，子域或缺乏子域也是不同的（www.example.com和 app.example.com ）。

app.enableCors({
  origin: [
    'http://localhost:3000',
    'http://example.com',
    'http://www.example.com',
    'http://app.example.com',
    'https://example.com',
    'https://www.example.com',
    'https://app.example.com',
  ],
  methods: ["GET", "POST"],
  credentials: true,
});

Answer 3

尝试使用https://docs.nestjs.com/techniques/cors中描述的方法

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

Answer 4

我能够通过提供我自己的原点函数来让它工作。完整的 enableCors 函数类似于 NestJS 或任何 NodeJS 服务器，例如：

var whitelist = ['https://website.com', 'https://www.website.com'];
app.enableCors({
origin: function (origin, callback) {
  if (whitelist.indexOf(origin) !== -1) {
    console.log("allowed cors for:", origin)
    callback(null, true)
  } else {
    console.log("blocked cors for:", origin)
    callback(new Error('Not allowed by CORS'))
  }
},
allowedHeaders: 'X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept, Observe',
methods: "GET,PUT,POST,DELETE,UPDATE,OPTIONS",
credentials: true,
});

和 appOptions 如果你使用的是 NestJS Express：

const app = await NestFactory.create<NestExpressApplication>(AppModule);

Answer 5

悲伤，就知道你也尝试：

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

它仍然无法正常工作。

确保在您的服务器端启用了cors，它应该是这样的：

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Accept');
  next();
});

并确保您的浏览器支持cors。如果所有这些仍然不起作用，我会建议您下载适用于 Chrome 的Allow-Control-Allow-Origin扩展程序，它应该可以解决您的问题。

Answer 6

不知何故，问题是使用npm run webpack. 如果我使用它来编译它，prestart:prod那么它将起作用。

感谢@georgii-rychko 通过评论提出建议。

Answer 7

也许您undefined使用以下白名单进入 origin 。如果您不想阻止REST 工具或服务器到服务器的请求，请!origin在 origin 函数中添加检查，如下所示：

const whitelist = ['example.com', 'api.example.com'];
app.enableCors({
  origin: function (origin, callback) {
    if (!origin || whitelist.indexOf(origin) !== -1) {
      callback(null, true)
    } else {
      callback(new Error('Not allowed by CORS'))
    }
  },
  ...
});