VueApollo CORS request fails

Question

i'm facing a problem trying to make a request to API with address different against client.

client app lives at http://localhost:8080 server app lives at http://localhost:4000

in main.js i'm creating apollo client

const apolloClient = new ApolloClient({
  uri: 'http://localhost:4000/v1/graphql',
})

const apolloProvider = new VueApollo({
  defaultClient: apolloClient,
})

and feed the apolloProvider variable to Vue.

in component code that's calling API endpoint is looking like this

<template>
  <div>{{ categories }}</div>
</template>

<script>
import gql from 'graphql-tag'

export default {
  apollo: {
    categories: gql`query {
      categories {
        name
        _id
      }
    }`
  }
}
</script>

my GraphQL server that should accept the query from VueApollo is looking like this

// apollo
const { ApolloServer, makeExecutableSchema } = require('apollo-server')

const typeDefs = require('./schema')
const resolvers = require('./resolvers')

const schema = makeExecutableSchema({
  typeDefs,
  resolvers,
})

const server = new ApolloServer({
  schema,
  cors: {
    origin: 'http://localhost:8080',
    methods: 'POST',
    optionsSuccessStatus: 204,
    preflightContinue: false,
  },
})

server.listen({ port: process.env.PORT || 4000 }).then(({ url }) => {
  console.log(`🚀 app running at ${url}`)
})

in Chrome browser requests from VueApollo accepted and response returned appropriately, but in FireFox i'm getting a CORS errors like this

am i missing anything guys? please help!

Answer 1

i'm not sure what was wrong, but while i was trying to find out a solution i've noticed that my vue-cli module out of date. for me it was 3.1.1. so i updated vue cli to 4.5.9 and it got worked.