CORS issues deployed Netlify Lambda Apollo Server connecting from Nuxt app in different app

Hi,

I’m currently running 2 apps:

  • Nuxt app in SPA mode with Apollo Client
  • Netlify Lambda + Apollo Server Lambda

The nuxt app tries to connect to the apollo functions app, but I’m getting CORS errors locally and when I deploy the app. The graphql playground of the api does work though.

Both the Nuxt app and Apollo functions are completely separate apps with their own domains, but both running on Netlify (eg: myapi.netlify.app and mynuxtapp.netlify.app). somehow I’m getting CORS errors locally using netlify-lambda serve and when deployed.

Apollo has been configured with CORS on like this:

  cors: {
    origin: '*',
    credentials: true
  },

When trying to connect with my app with just Apollo Server locally it works.

Any ideas?

Found it! It is not a Netlify problem. This is related due to apollo-server-lambda. The lambda function handler itself requires cors configuration on top of the apollo cors config:

const server = new ApolloServer({
  origin: '*',
  credentials: true
})

exports.handler = server.createHandler({
  cors: {
    origin: '*',
    credentials: true
  }
})
2 Likes

awesome! thank you so much for sharing the fix :muscle:

1 Like