How to enable CORS options in Apollo-Server-Micro?

 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.

how to fix the cookie is not saving in the browser storage when login mutation is called in GraphQL playground?

 when I implemented the login function, I use the express-session to handle the refresh token. one copy will be save to MongoDB, another one will be save to the cookie. However, I tested the login mutation in the Apollo GraphQL playground. the cookie had been sent in the response header, but it never save in the browser.

the root cause of this issue is sterm from the playground setting.

by default "request.credentials": "omit",  it should be "request.credentials": "include", to force the playground to save the cookie

here is the original setting of playground

{

  "editor.cursorShape": "line",

  "editor.fontFamily": "'Source Code Pro', 'Consolas', 'Inconsolata', 'Droid Sans Mono', 'Monaco', monospace",

  "editor.fontSize": 14,

  "editor.reuseHeaders": true,

  "editor.theme": "dark",

  "general.betaUpdates": false,

  "prettier.printWidth": 80,

  "prettier.tabWidth": 2,

  "prettier.useTabs": false,

  "request.credentials": "omit",

  "schema.disableComments": true,

  "schema.polling.enable": true,

  "schema.polling.endpointFilter": "*localhost*",

  "schema.polling.interval": 2000,

  "tracing.hideTracingResponse": true,

  "queryPlan.hideQueryPlanResponse": true

}

the following is the updated configuration

{

  "editor.cursorShape": "line",

  "editor.fontFamily": "'Source Code Pro', 'Consolas', 'Inconsolata', 'Droid Sans Mono', 'Monaco', monospace",

  "editor.fontSize": 14,

  "editor.reuseHeaders": true,

  "editor.theme": "dark",

  "general.betaUpdates": false,

  "prettier.printWidth": 80,

  "prettier.tabWidth": 2,

  "prettier.useTabs": false,

  "request.credentials": "include",

  "schema.disableComments": true,

  "schema.polling.enable": true,

  "schema.polling.endpointFilter": "*localhost*",

  "schema.polling.interval": 2000,

  "tracing.hideTracingResponse": true,

  "queryPlan.hideQueryPlanResponse": true

}

how to disable graphql in Apollo Server?

 It is very convenient to have graphql playground enable on the Apollo Server during the development.

However there will be a security issue if we have this feature enable on the production server. we must 

turn off this feature in the production environment.  we can easily turn on/off this feature on the Apollo

Server configuration setup. I create a environment variable to control this feature.

const apolloServer = new ApolloServer({

        schema: await buildSchema({

          resolvers: [UserResolvers]

        }),

        context: ({ req, res }) => ({ req, res }),

        introspection: process.env.DEV_ENV==="development",

        playground: process.env.DEV_ENV==="development",});