VueApollo CORS 请求失败

Question

我在尝试使用与客户端不同的地址向 API 发出请求时遇到问题。

客户端应用程序位于 http://localhost:8080 服务器应用程序位于 http://localhost:4000

在 main.js 我正在创建 apollo 客户端

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

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

并将 apolloProvider 变量提供给 Vue。

在调用 API 端点的组件代码中看起来像这样

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

<script>
import gql from 'graphql-tag'

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

我应该接受来自 VueApollo 的查询的 GraphQL 服务器看起来像这样

// 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}`)
})

在 Chrome 中，来自 VueApollo 的浏览器请求被接受并且相应地返回了响应，但是在 FireFox 中我遇到了这样的 CORS 错误

我错过了什么吗？请帮忙！

Answer 1

我不确定出了什么问题，但是当我试图找出解决方案时，我注意到我的 vue-cli 模块已过时。对我来说是 3.1.1。所以我将 vue cli 更新到 4.5.9，它开始工作了。

VueApollo CORS 请求失败

VueApollo CORS request fails

apollo

apollo-client

apollo-server

vue-apollo