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