Apollo 和 GraphQL CORS答案

【问题标题】：Apollo and GraphQL CORSApollo 和 GraphQL CORS
【发布时间】：2018-01-26 07:39:58
【问题描述】：

Apollo 从 Rails 后端获取内容时遇到了令人沮丧的问题。这个问题似乎正在解决我在 Apollo 项目中使用 CORS 的问题。

技术

apollo 客户端：1.9.3
graphql：0.11.7
反应：15.6.1
反应阿波罗：1.4.16

cors.rb

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins `*`

    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

rails 正在端口 3001 上运行 rails s -p 3001

使用此后端，您可以发出 curl 请求，一切都按预期进行

工作卷发

curl -X POST -H "Content-Type: application/json" -d '{"query": "{users{first_name}}"}' http://localhost:3001/graphql

这会返回预期的数据

所以这一切都指向了 Apollo 和应用程序前端的问题。

index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import ApolloClient from 'apollo-client';
import { ApolloProvider, createNetworkInterface } from 'react-apollo';

import App from './containers/App.jsx';

const client = new ApolloClient({
  networkInterface: createNetworkInterface({
    uri: 'http://localhost:3001/graphql', <<<<< There is a different endpoint then the standard 'graphql' which is why this is declared
  })
});

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById('root')
);

App.jsx

import React, { Component } from 'react';
import gql from 'graphql-tag';
import { graphql } from 'react-apollo';

class App extends Component {
  render() {
    console.log(this.props);
    return (
      <div>Application</div>
    );
  }
}

const query = gql`
  {
    users {
      first_name
    }
  }
`;

export default graphql(query)(App);

这会返回错误

无法加载http://localhost:3001/graphql：对预检的响应请求未通过访问控制检查：否请求中存在“Access-Control-Allow-Origin”标头资源。因此不允许使用原点“http://localhost:8080” 使用权。如果不透明的响应满足您的需求，请设置请求的模式为“no-cors”以获取禁用 CORS 的资源。

app.jsx（更改模式）

const client = new ApolloClient({
  networkInterface: createNetworkInterface({
    uri: 'http://localhost:3001/graphql',
    opts: {
      mode: 'no-cors'
    }
  })
});

这会返回错误

未处理（在 react-apollo 中）错误：网络错误：网络请求失败，状态为 0 - ""`

查看请求：

一般

Request URL:http://localhost:3001/graphql
Request Method:POST
Status Code:200 OK
Remote Address:[::1]:3001
Referrer Policy:no-referrer-when-downgrade

响应标题

Cache-Control:max-age=0, private, must-revalidate 内容类型：应用程序/json；字符集=utf-8 传输编码：分块变化：原产地

请求标头

Accept:*/*
Connection:keep-alive
Content-Length:87
Content-Type:text/plain;charset=UTF-8 <<< I'm wondering if this needs to be application/json?
Host:localhost:3001
Origin:http://localhost:8080
Referer:http://localhost:8080/
User-Agent:Chrome/61

请求有效负载

{query: "{↵ users {↵ first_name↵ __typename↵ }↵}↵", operationName: null}
operationName
:
null
query
:
"{↵  users {↵    first_name↵    __typename↵  }↵}↵"

所以为了得到某种响应，我所做的是安装 Chrome 扩展程序 Allow-Control-Allow-Origin: *

如果mode: 'no-cors' 被删除并且此扩展程序处于活动状态，则可以检索数据。

在浏览 Apollo 文档时，我找不到关于这个主题的很多内容。我尝试实现Apollo Auth Header，但这只会产生与上述相同的错误。

我的 Apollo 代码中的什么可能导致这些错误？有哪些步骤可以解决问题？

搜索 GitHub 问题和其他 Google 搜索要么是针对旧版本的 Apollo，其中问题“已得到解决”，要么在实施时不起作用。

编辑

添加 Ruby on Rails 标记以防万一 Rails 需要更多配置。在研究 Apollo 客户端问题后发现 Network error: Network request failed with status 0 - "" 由于后端存在问题，此问题已由 OP 解决。

【问题讨论】：

标签： ruby-on-rails reactjs cors graphql react-apollo

【解决方案1】：

问题出在 cors.rb 文件中

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins `*`

    resource '*',
    headers: :any,
    methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

问题是origins '*' 有反引号而不是引号

还能够删除 index.jsx 中的 opts 对象，并且一切正常

【讨论】：