Apollo et GraphQL CORS

Question

Courir dans un problème frustrant avec Apollo obtenir le contenu d'un back-end Rails. Le problème semble résider dans l'utilisation de CORS dans mon projet Apollo.

Tech

• apollo-client: 1.9.3
• graphql: 0.11.7
• RÉACTION: 15.6.1
• réagir-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 est en cours d'exécution sur le port 3001rails s -p 3001

Avec ce backend vous pouvez faire curl demandes et tout fonctionne comme prévu

travail Curl

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

Ce retour en arrière données attendues

---

Donc, c'est tout ce pointage à un problème avec Apollo et le frontend de l'application.

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); 

Cela renvoie l'erreur 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 (mode changement)

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

Cela renvoie l'erreur

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

Regarder la demande:

GENERAL

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

RÉPONSE TÊTES

Cac he-Control: max-age = 0, private, doit-revalider Content-Type: application/json; charset = utf-8 Transfer-Encoding: chunked Variez: Origine

DEMANDE TÊTES

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 

DEMANDE UTILE

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

---

Donc ce que je l'ai fait pour obtenir une sorte de réponse était d'installer l'extension Chrome Allow-Control-Allow-Origin: *

Si mode: 'no-cors' est supprimé et que cette extension est active, les données peuvent être récupérées.

---

En parcourant les documents Apollo, je suis incapable de trouver beaucoup sur ce sujet. J'ai essayé d'implémenter le Apollo Auth Header mais cela a simplement produit les mêmes erreurs que ci-dessus.

Qu'est-ce que mon code Apollo pourrait causer ces erreurs? Et quelles sont les étapes pour résoudre le problème? Recherche sur les problèmes GitHub et autres recherches Google sont soit pour les versions beaucoup plus anciennes d'Apollo dans lequel les problèmes "ont été adressées" ou ne fonctionnent pas lors de la mise en œuvre.

Modifier

Ajout Ruby on Rails tag juste au cas où il y a plus de configuration nécessaire dans Rails. Lors de la recherche des problèmes Apollo Client trouvés Network error: Network request failed with status 0 - "" Cette émission a été résolue par l'OP en raison d'un problème sur le backend.

Answer 1

question a été dans le cors.rb fichier

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 

La question était origins '*' avait lieu de citations des accents graves

a également pu supprimer l'objet opts dans le index.jsx et tout fonctionne comme prévu