How to redirect to Apollo GraphQL Sandbox from NestJS app in local?

Question

Now using NestJS and Apollo Graphql. After start local development environment, access http://localhost:3000/graphql, got CSRF error.

{
   "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)"
            ]
         }
      }
   ]
}

But if set http://localhost:3000/graphql in https://studio.apollographql.com/sandbox/explorer, it works well.

Generally, it should redirect to Apollo Graphql Sandbox from http://localhost:3000/graphql, but why it got error directly?

The related code in NextJS is

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

Answer 1

I had this issue. I was testing locally at http://localhost:7000/graphql without any issue, but after deploying my NestJS graphql apollo server on render.com, I began to experience this issue. Here is the solution that works for me. Set the allowedHeaders properties inside the app.enableCors() as below in your main.ts file.

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();