I’m using :
@apollo/server: ^4.10.4
express: ^4.19.2
server code :
...
const app = express();
app.use(express.json());
app.use(cors());
const httpServer = http.createServer(app);
const server = new ApolloServer({
typeDefs,
resolvers,
plugins: [
ApolloServerPluginDrainHttpServer({ httpServer }),
ApolloServerPluginLandingPageDisabled() // this is causes of CSRF error
],
});
await server.start();
const middleware = createMiddleware(server, { db });
app.use(rootEndpoint, middleware);
await new Promise<void>((resolve) => httpServer.listen({ port, host }, resolve));
...
Fetch :
Expected response :
Apollo’s sandbox disappears
Actual response :
{
"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 (/Users/blablabla/node_modules/@apollo/server/src/internalErrorClasses.ts:15:5)",
" at new BadRequestError (/Users/blablabla/node_modules/@apollo/server/src/internalErrorClasses.ts:116:5)",
" at preventCsrf (/Users/blablabla/node_modules/@apollo/server/src/preventCsrf.ts:91:9)",
" at ApolloServer.executeHTTPGraphQLRequest (/Users/blablabla/node_modules/@apollo/server/src/ApolloServer.ts:1052:20)",
" at processTicksAndRejections (node:internal/process/task_queues:95:5)"
]
}
}
]
}