DEV Community

CORS in Apollo Client & Apollo Server

Ryan Doyle on May 01, 2019

This is a follow-up Ok, a while back I asked a question and spent a few days trying to figure this out. I'm hoping that this can direct...

Read full post

Radha Satam • Aug 20 '19

Why not just add corsOptions on server.applyMiddleware

const corsOptions = {
  origin: 'http://localhost:3000',
  credentials: true
}

This worked for me and I didn't have to use the cors dependency

server.applyMiddleware({ app, cors: corsOptions });

knary • Oct 8 '20

This is the only method I got cors to work with. Thanks!

mwangiKibui • Feb 18 '21

Worked out too. Thanks.

Favour George • Sep 25 '19

Hi Ryan,

I am using the apollo-server to setup a node apollo server. I just deployed to heroku a production verion of my app, but I can't seem to communicate with it via the React apollo-client code. It complains of cors. I have had no success in fixing it. I have tried a lot of solutions online, but no success yet.

require('dotenv').config()
const { MONGODB_URI, PORT, SSL_PORT, MONGODB_URI_LOCAL, NODE_ENV } = process.env
const { ApolloServer } = require('apollo-server')
const fs = require('fs')
const path = require('path')
const https = require('https')
const DB = require('./database')
const superAdminDetails = require('./config/superAdmin.config')
const formatError = require('./utils/formatError')
const allowedOrigins = ['https://staylow.herokuapp.com', 'http://staylow.herokuapp.com', 'staylow.herokuapp.com', 'http://localhost:3000']

const typeDefs = require('./graphql/types')
const resolvers = require('./graphql/resolvers')
const dataSources = require('./graphql/datasources')

const { getUser } = require('./utils/auth')

const DB_URL = NODE_ENV ? MONGODB_URI : MONGODB_URI_LOCAL
new DB(superAdminDetails).connect(DB_URL)

const server = new ApolloServer({
  cors: {
    origin: '*' // I have tried `allowedOrigins` here but no sucess
  },
  typeDefs,
  resolvers,
  formatError,
  context: async ({ req }) => {
    const token = req.headers.authorization || '';

    const AuthUser = await getUser(token);

    return { AuthUser };
  },
  dataSources: () => (dataSources),
})

server.listen(PORT).then(({ url }) => {
  console.log(`🚀 Server ready at ${NODE_ENV ? 'https://oneidserver.herokuapp.com' : url}`)
})

https.createServer({
  key: fs.readFileSync(path.join(process.cwd(), '/key.pem')),
  cert: fs.readFileSync(path.join(process.cwd(), '/cert.pem'))
})
  .listen(SSL_PORT || 4141, () => {
    console.log(`HTTPS server running on ${
      NODE_ENV ?
        'https://oneidserver.herokuapp.com:' : 'https://localhost:'}${SSL_PORT || 4141}/`)
  }).setTimeout(780000)

Do you why this is happening?

Ryan Doyle • Sep 26 '19

Not sure off hand, it's difficult to tell without any errors I can get a look at. One thing is, I didn't use CORS in Apollo client, which you still are. I added apollo-server-express and used that.

Favour George • Sep 27 '19

I have switched to apollo-server-express and it still had same issues. I am not using cors from my client app

tmns • Jun 4 '19

Just spent several hours trying to figure out what on Earth I could possibly not be doing correct. Somehow, among all the tutorials / q&a's / blog posts / etc out there, it seems none of them mention the crucial point that you have to turn off the default cors option. You saved my day bud! Thanks!

autsada • Apr 19 '20

For me I just have to set fetchOptions in the frontend code to {credentials: 'included'}, I use Urql instead of Apollo-Client though.

Configuration for Apollo-Server-Express is as normal (didn't have to use the cors package).

apolloServer.applyMiddleware({ app, cors: { origin: FRONTEND_URL, credentials: true } })

Wise Introvert • Oct 5 '20

Ryan Doyle, great article. I'm facing the same issue with my setup. Would be awesome if you could take a look at it: stackoverflow.com/questions/642075...