代码之家 › 专栏 › 技术社区 › Alpin Cleopatra

如何从本地的NestJS应用程序重定向到Apollo GraphQL沙盒?

apollo-server nestjs graphql

0

Alpin Cleopatra · 技术社区 · 2 年前

现在使用NestJS和Apollo Graphql。启动本地开发环境后,访问http://localhost:3000/graphql,得到CSRF错误。

{
   "errors":[
      {
         "message":"This operation has been blocked as a potential Cross-Site Request Forgery (CSRF). Please either specify a 'content-type' header (with a type that is not one of application/x-www-form-urlencoded, multipart/form-data, text/plain) or provide a non-empty value for one of the following headers: x-apollo-operation-name, apollo-require-preflight\n",
         "extensions":{
            "code":"BAD_REQUEST",
            "stacktrace":[
               "BadRequestError: This operation has been blocked as a potential Cross-Site Request Forgery (CSRF). Please either specify a 'content-type' header (with a type that is not one of application/x-www-form-urlencoded, multipart/form-data, text/plain) or provide a non-empty value for one of the following headers: x-apollo-operation-name, apollo-require-preflight",
               "",
               "    at new GraphQLErrorWithCode (/usr/app/node_modules/@apollo/server/src/internalErrorClasses.ts:15:5)",
               "    at new BadRequestError (/usr/app/node_modules/@apollo/server/src/internalErrorClasses.ts:116:5)",
               "    at preventCsrf (/usr/app/node_modules/@apollo/server/src/preventCsrf.ts:91:9)",
               "    at ApolloServer.executeHTTPGraphQLRequest (/usr/app/node_modules/@apollo/server/src/ApolloServer.ts:1031:20)",
               "    at processTicksAndRejections (node:internal/process/task_queues:95:5)"
            ]
         }
      }
   ]
}

但如果设置http://localhost:3000/graphql在里面 https://studio.apollographql.com/sandbox/explorer ,效果很好。

通常,它应该重定向到Apollo Graphql Sandboxhttp://localhost:3000/graphql,但为什么会直接出错?

NextJS中的相关代码是

    const app = await NestFactory.create(AppModule, { bufferLogs: true });
    app.enableCors();

0 回复 | 直到 2 年前

1

2

zackOverflow 2 年前

我有这个问题。我在当地测试http://localhost:7000/graphql没有任何问题,但在render.com上部署了NestJS graphql-apollo服务器后,我开始遇到这个问题。这是一个适合我的解决方案。在app.enableCors()中设置allowedHeaders属性,如下所示,在main.ts文件中。

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.enableCors({
    origin: '*',
    credentials: true,
    // all headers that client are allowed to use
    allowedHeaders: [
      'Accept',
      'Authorization',
      'Content-Type',
      'X-Requested-With',
      'apollo-require-preflight',
    ],
    methods: ['GET', 'PUT', 'POST', 'DELETE', 'OPTIONS'],
  });
  app.useGlobalPipes(
    new ValidationPipe({
      whitelist: true,
      forbidNonWhitelisted: true,
    }),
  );
  const port = process.env.PORT || 7000;
  await app.listen(port);
}
bootstrap();