Apollo-server: Apollo Server Express - CORS issue

[brunocrosier]

According to the Apollo docs for Express, the way to enable CORS is in the .applyMiddleware({app}) function
I have tested this and it doesn't work. My setup is exactly the same as this: https://github.com/apollographql/apollo-server/tree/master/packages/apollo-server-express#express except that the applyMiddleware now looks like this:

server.applyMiddleware({
  app,
  cors: {
    credentials: true,
    origin: new RegExp("/*/")
  }
})

Still, on my frontend I get a CORS error:

"Access to fetch at 'https://blablabla.now.sh/graphql' from origin 'http://localhost:3000' 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."

I'm going crazy trying to figure this out - any ideas how to make it work?

[gusMoreno]

I have the same issue, but I am using apollo-server-azure-functions. I tried everything, and it works with postman and insomnia, but doesn't work in browser.

exports.graphqlHandler = server.createHandler({
  cors: {
    origin:         '*',
    exposedHeaders: 'Authorization',
    allowedHeaders: 'Authorization',
    credentials:    true,
  }
})

I got the same error as @brunocrosier does.

How can I fix it??

[nikhilunni511]

@brunocrosier @gusMoreno I got the same error and fixed the issue by doing the following things :

• set cors origin as the client url and credential as true at server side

cors: { origin: CLIENT_URL, credentials: true },

• and set credentials: include at client side

When responding to a credentialed request, the server must specify an origin in the value of the Access-Control-Allow-Origin header, instead of specifying the "*" wildcard.

[abernix]

I don't believe this is a problem with Apollo Server. The express integration directly passes the options to cors:

https://github.com/apollographql/apollo-server/blob/53f9021923f0cb74c5df730f38e1217e85a9ffed/packages/apollo-server-express/src/ApolloServer.ts#L174-L179

Please consider the suggestion from @nikhilunni511 or investigate the problem more generically outside of the context of Apollo Server itself, or provide a reproduction indicating that it's unique to Apollo Server's usage of the cors module.

[miliu99]

I got the same problem and already spend hours on it and tried many options but no luck. @nikhilunni511 suggestion is not very clear -- where do I put "credentials: include"? If I do

const client = new GraphQLClient({ url: config.graphql.URL, credentials: include });

I got this error: 'include' is not defined

const client = new GraphQLClient({ url: config.graphql.URL, credentials: 'include' });

I got no error, but it didn't help either.

Can you post the exact code?

Strange thing is that I have another project with the same settings but that one worked and still working. In fact, this new project is based on a clone of that one. Here are the settings that I normally use using serverless deployment:
server:

const { ApolloServer } = require('apollo-server-lambda');

const server = new ApolloServer({
  typeDefs,
  resolvers,
  dataSources,
  debug: true
});

exports.graphqlHandler = server.createHandler({
  cors: {
    origin: '*',
    credentials: true,
  },
});

client:
const client = new GraphQLClient({ url: config.graphql.URL, cache: memCache() });

serverless.yml:

service: apollo-lambda
provider:
  name: aws
  runtime: nodejs12.x
functions:
  graphql:
    handler: graphql.graphqlHandler
    events:
    - http:
        path: graphql
        method: post
        cors: true
    - http:
        path: graphql
        method: get
        cors: true

However I got this error in the new project:

"Access to fetch at 'https://eyga0o951a.execute-api.us-east-1.amazonaws.com/dev/graphql' from origin 'http://localhost:3000' has been blocked by CORS policy: 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."

This is slightly different to what is shown at beginning of this thread. If I remove the line "cors: true" from serverless.yml, then I got the exact same error:

"Access to fetch at 'https://eyga0o951a.execute-api.us-east-1.amazonaws.com/dev/graphql' from origin 'http://localhost:3000' 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."

Then, I tried playing around with the server settings:

exports.graphqlHandler = server.createHandler({
  cors: {
    origin: '*',
    methods: 'POST',
    allowedHeaders: [
      'Content-Type',
      'Origin',
      'Accept'
    ]
  },
});

or

exports.graphqlHandler = function(event, context, callback) {
  callbackFilter = function(error, output) {
    output.headers['Access-Control-Allow-Origin'] = "*";
    callback(error, output);
  };
  const handler = server.graphqlLambda({ schema: typeDefs });

  return handler(event, context, callbackFilter);
};

I also tried not using serverless.yml, but the template.yaml as suggested in the main page of this repo, but nothing helps.

[miliu99]

OK, I got it working now. It turns out the error message is completely unrelated to my problem - it has nothing to do with CORS. In my case, it had included a file from wrong path. If I had looked at the CloudWatch log, I would have figured it out right away, but I was misled by the message and looking for CORS all the time. I could have deleted my previous post, but i think it might help somebody down the road running into similar problems. So, check the CloudWatch log first!

[glasser]

@ashalfarhan I don't think there's enough information to debug here, but also noting that the problem here probably isn't with apollo-server, given that you are (reasonably) disabling AS's cors support. Is process.env.CLIENT_URL actually https://dashboard-haans.netlify.app?