Apollo 和 GraphQL CORS

Question

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

科技

apollo-client: 1.9.3
graphql: 0.11.7
反应：15.6.1
react-apollo: 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

这个returns返回预期数据

所以这一切都指向 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);

这个returns错误

Failed to load http://localhost:3001/graphql: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

app.jsx（换模式）

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

这个returns错误

Unhandled (in react-apollo) Error: Network error: Network request failed with status 0 - ""`

查看请求：

一般

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

回应HEADERS

Cache-Control:max-age=0, 私有, must-revalidate Content-Type:application/json;字符集=utf-8 Transfer-Encoding：分块 Vary:Origin

请求HEADERS

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 搜索是针对 much-older 版本的 Apollo，其中问题 "have been addressed" 或在实施时不起作用。

编辑

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

Answer 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 对象，一切都按预期工作

Apollo 和 GraphQL CORS

Apollo and GraphQL CORS

ruby-on-rails

cors

reactjs

graphql

react-apollo