首页 > 解决方案 > NestJS Graphql CORS:通过远程主机访问 API 时出现问题,而在本地主机上运行

问题描述

我目前正在尝试在 Google Cloud Run 上使用 Graphql 部署我的 NestJS 服务器。我还有一个作为客户端使用的 React 应用程序,它托管在 Netlify 上。

但是,当我尝试运行此控制台时,我在控制台中收到以下 CORS(跨源资源共享)错误:

Access to fetch at 'https://google-cloud.run.app/graphql' from origin 'https://myapp.netlify.app' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

我的 NestJS 应用配置如下所示:

  // {cors: true}
  const app = await NestFactory.create(AppModule);
  app.enableCors({
    origin: true,
    credentials: true,
    methods: 'GET,HEAD,PUT,PATCH,POST,DELETE,OPTIONS',
    allowedHeaders: "Content-Type,Accept,Authorization,Access-Control-Allow-Origin"
  });

在另一个 stackoverflow 帖子中,我看到 GraphQL CORS 配置覆盖了 NestJS CORS 配置,所以我也将 CORS 逻辑添加到 GraphQLapp.module.ts中,如下所示:

@Module({
  controllers: [],
  imports: [
    ...,
    GraphQLModule.forRootAsync({
      useFactory: (configService) => {
        const playground = configService.get("GRAPHQL_PLAYGROUND");
        const introspection = configService.get("GRAPHQL_INTROSPECTION");
        return {
          autoSchemaFile: true,
          playground,
          introspection: playground || introspection,
          cors: {
            credentials: true,
            origin: true,
            methods: 'GET,HEAD,PUT,PATCH,POST,DELETE,OPTIONS',
            allowedHeaders: "Content-Type,Accept,Authorization,Access-Control-Allow-Origin"
          },
          context: ({req}) => {
            return {req};
          },
          installSubscriptionHandlers: true
        };
      },
      inject: [ConfigService],
      imports: [ConfigModule]
    }),
...

当我从 运行客户端localhost并且直接连接到 Google Cloud Run Container 时,此时一切正常,并且我没有收到任何 CORS 错误。我正在使用 Apollo GraphQL 客户端发出 API 请求。

但是,当我使用 Netlify 客户端时,我遇到了上面的 CORS 问题。

关于如何解决这个问题的任何想法?这是 Netlify 的问题吗?这是 Google Cloud Run 问题吗?或者我是否缺少 CORS 的任何标题?

标签: node.jsgraphqlcorsnestjsnetlify

解决方案


推荐阅读