GraphQL+React+Apollo：无法从服务器获取数据到客户端答案

【问题标题】：GraphQL+React+Apollo:Unable to fetch data from server to clientGraphQL+React+Apollo：无法从服务器获取数据到客户端
【发布时间】：2018-09-18 19:19:12
【问题描述】：

当我使用以下内容查询服务器时：-

query{
  counterparty {
    name
  }
}

我得到了想要的输出。

但是当我尝试通过在 react 中渲染组件来在屏幕上显示输出时，我收到以下错误：-

以下是我客户端的代码：- 我的 App.js

import React, { Component } from 'react';
import ApolloClient from "apollo-boost";
import { ApolloProvider } from "react-apollo";
import {ExchangeRates} from "./ExchangeComponent.jsx"

const client = new ApolloClient({
  uri: "https://localhost:5000/graphql"
}); 

export default class App extends Component {
  render() {
    return (
      <div>
        <ApolloProvider client={client}>
          <div>
            <h2>My first Apollo app </h2>
            <div><ExchangeRates/></div>
          </div>
        </ApolloProvider>
      </div>
    );
  }
}

我的 Exchange 组件：-

import React from "react"
import { Query } from "react-apollo";
import gql from "graphql-tag";

export const ExchangeRates = () => (
  <Query
    query={gql`
     {
    counterparty {
     name
    }
  }
    `}
  >
    {({ loading, error, data }) => {
      if (loading) return <p>Loading...</p>;
      if (error) return <p>Error :(</p>;

      return  <div>
            data {data}
        </div>
    
    }}
  </Query>
);

【问题讨论】：

您的 GQL 似乎没有运行...检查您的 GQL 服务器是否已在该端口上启动并运行
它正在运行，我从服务器得到了完美的输出
嗨，您的本地 GQL 在 https 上运行吗？
那么也许与CORS有关？我在预检 (OPTIONS) 请求中看到了该错误，您能探索一下 request-response 吗？（网络标签）
@Honza 启用 cors 解决了我的问题。谢谢

标签： javascript reactjs graphql react-apollo

【解决方案1】：

检查您的 CORS 设置，因为预检 OPTION 请求上的提取请求失败:)

【讨论】：