According the Apollo Server documentation, the CORS option is not available in server configuration.
"Note that apollo-server-micro does not have a built-in way of setting CORS headers."
when we create a apollo server, we can't set the cors options in the configuration object.
import {ApolloServer} from 'apollo-server-micro';
import 'reflect-metadata';
import { buildSchema } from 'type-graphql';
import { PetsResolver } from '../../src/schema/pet.resolver';
const schema = await buildSchema({
resolvers: [PetsResolver],
});
const server = new ApolloServer({
schema,
csrfPrevention: true, // see below for more about this
cache: "bounded",
});
As a result, we should encounter the following CORS policy issue
Access to fetch at 'http://localhost:3000/api/graphql' from origin 'https://studio.apollographql.com' 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.
Since we can't add the cors option with the configruation object, we have to manually add those cors options in the handler function
export default async function handler(req:any, res:any){
res.setHeader("Access-Control-Allow-Credentials", "true");
res.setHeader(
"Access-Control-Allow-Origin",
"https://studio.apollographql.com"
);
res.setHeader(
"Access-Control-Allow-Headers",
"Origin, X-Requested-With, Content-Type, Accept,
Access-Control-Allow-Methods, Access-Control-Allow-Origin,
Access-Control-Allow-Credentials, Access-Control-Allow-Headers"
);
res.setHeader(
"Access-Control-Allow-Methods",
"POST, GET, PUT, PATCH, DELETE, OPTIONS, HEAD"
);
if (req.method === "OPTIONS") {
res.end();
return false;
}
await startServer;
await server.createHandler({path:"/api/graphql"})(req, res);
}
Now the cross site access violation should be resolved and we can manipulate the query and mutation in the apollo-studio.
