如何在@nestjs/graphql 12.0.1版本中配置CORS参数？

在NestJS GraphQL从v9升级到v12后，由于底层依赖的Apollo Server升级到了v4，配置结构发生了变化，原顶层的cors参数不再属于ApolloDriverConfig类型，因此会出现类型错误。以下是两种正确的配置方式：

方法1：通过Apollo Server专属配置设置CORS #

将CORS配置嵌套到apollo.server对象下，这是Apollo Server 4推荐的配置方式：

GraphQLModule.forRoot<ApolloDriverConfig>({
  driver: ApolloDriver,
  subscriptions: {
    'graphql-ws': true,
  },
  buildSchemaOptions: { dateScalarMode: 'timestamp' },
  autoSchemaFile: join(process.cwd(), 'schema.gql'),
  sortSchema: true,
  playground: process.env.GRAPHQL_PLAYGROUND_ENABLED === 'true',
  context: ({ req, res }) => ({ req, res }),
  // 新版CORS配置位置
  apollo: {
    server: {
      cors: {
        origin: [
          'http://localhost:3000',
          'http://127.0.0.1:3000',
          'https://studio.apollographql.com',
        ],
        credentials: true,
      },
    },
  },
}),

方法2：全局配置NestJS应用的CORS #

如果你的整个应用需要统一的CORS规则，可以直接在main.ts中启用全局CORS，这种方式会覆盖GraphQL模块的局部配置：

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  // 全局CORS配置
  app.enableCors({
    origin: [
      'http://localhost:3000',
      'http://127.0.0.1:3000',
      'https://studio.apollographql.com',
    ],
    credentials: true,
  });
  await app.listen(3000);
}
bootstrap();

额外：WebSocket订阅的CORS配置 #

如果你的应用使用了GraphQL订阅（如graphql-ws），需要单独在subscriptions配置中设置CORS：

subscriptions: {
  'graphql-ws': {
    cors: {
      origin: [
        'http://localhost:3000',
        'http://127.0.0.1:3000',
        'https://studio.apollographql.com',
      ],
      credentials: true,
    },
  },
},

原因说明 #

NestJS GraphQL v12对应Apollo Server 4版本，Apollo Server 4对配置结构进行了重构，将原顶层的HTTP服务相关配置（包括CORS）统一移到了apollo.server嵌套对象中，因此原顶层的cors参数被移除，导致TypeScript类型校验报错。

内容的提问来源于stack exchange，提问作者Eugene Zalivadnyi