VueApollo CORS 请求失败答案

【问题标题】：VueApollo CORS request failsVueApollo CORS 请求失败
【发布时间】：2021-03-11 05:02:51
【问题描述】：

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

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

在main.js 我正在创建阿波罗客户端

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 错误

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

【问题讨论】：

标签： apollo apollo-client apollo-server vue-apollo

【解决方案1】：

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

【讨论】：