Apollo和GraphQL CORS

Question

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

技术

• 阿波罗的客户端：1.9.3
• graphql：0.12.2
• 反应：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); 

这将返回错误

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.

应用。JSX（变化模式）

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

这将返回错误

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

寻找在请求：

GENERAL

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

响应头

CAC he-Control：max-age = 0，私人，必须重新验证 Content-Type：application/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 Auth Header，但这只是产生了与上述相同的错误。

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

在GitHub上搜索问题和其他Google搜索都是针对Apollo的老版本，其中的问题“已被解决”或在实施时无法正常工作。

编辑

以防万一on Rails的标签添加Ruby中，Rails中需要更多的配置。在研究发现的Apollo客户端问题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对象，一切正如预期工作