遇到令人沮喪的問題，Apollo從Rails後端獲取內容。這個問題似乎正在解決在我的Apollo項目中使用CORS的問題。Apollo和GraphQL 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解決。