Railsバックエンドからコンテンツを取得しているApolloの不満足な問題に取り組んでいます。この問題は、私のApolloプロジェクトでCORSを使用することで解決されるようです。ApolloとGraphQL CORS
テック
- アポロ・クライアント：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
レールがこのバックエンドではポート3001rails 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、プライベート、再検証する必要があります コンテンツタイプ：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を検索しています。
編集
レールに必要な複数の設定がある場合だけでRailsのタグにルビーを追加します。調査したところ、Apollo Clientの問題はNetwork error: Network request failed with status 0 - ""であることが判明しました。これは、バックエンドの問題のためにOPによって解決されました。