title: Apollo and GraphQL CORS
body: <p>Running into a frustrating issue with Apollo getting content from a Rails backend. The issue seems to be resolving around the use of CORS in my Apollo project.</p>
  
  <p><strong>Tech</strong></p>
  
  <ul>
  <li>apollo-client: 1.9.3</li>
  <li>graphql: 0.11.7</li>
  <li>react: 15.6.1</li>
  <li>react-apollo: 1.4.16</li>
  </ul>
  
  <p><strong>cors.rb</strong></p>
  
  <pre><code>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
  </code></pre>
  
  <p><em>rails is running on port 3001</em> <code>rails s -p 3001</code></p>
  
  <p>With this backend you can make <code>curl</code> requests and everything works as expected</p>
  
  <p><strong>Working Curl</strong></p>
  
  <pre><code>curl -X POST -H "Content-Type: application/json" -d '{"query": "{users{first_name}}"}' http://localhost:3001/graphql
  </code></pre>
  
  <p>This returns back expected data</p>
  
  <hr>
  
  <p>So this is all pointing to an issue with Apollo and the frontend of the application. </p>
  
  <p><strong>index.jsx</strong></p>
  
  <pre><code>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', &lt;&lt;&lt;&lt;&lt; There is a different endpoint then the standard 'graphql' which is why this is declared
    })
  });
  
  ReactDOM.render(
    &lt;ApolloProvider client={client}&gt;
      &lt;App /&gt;
    &lt;/ApolloProvider&gt;,
    document.getElementById('root')
  );
  </code></pre>
  
  <p><strong>App.jsx</strong></p>
  
  <pre><code>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 (
        &lt;div&gt;Application&lt;/div&gt;
      );
    }
  }
  
  const query = gql`
    {
      users {
        first_name
      }
    }
  `;
  
  export default graphql(query)(App);
  </code></pre>
  
  <p>This returns the error </p>
  
  <blockquote>
    <p>Failed to load <a href="http://localhost:3001/graphql" rel="noreferrer">http://localhost:3001/graphql</a>: Response to preflight
    request doesn't pass access control check: No
    'Access-Control-Allow-Origin' header is present on the requested
    resource. Origin '<a href="http://localhost:8080" rel="noreferrer">http://localhost:8080</a>' 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.</p>
  </blockquote>
  
  <p><strong>app.jsx (change mode)</strong></p>
  
  <pre><code>const client = new ApolloClient({
    networkInterface: createNetworkInterface({
      uri: 'http://localhost:3001/graphql',
      opts: {
        mode: 'no-cors'
      }
    })
  });
  </code></pre>
  
  <p>This returns the error</p>
  
  <blockquote>
    <p>Unhandled (in react-apollo) Error: Network error: Network request
    failed with status 0 - ""`</p>
  </blockquote>
  
  <p>Looking at the request:</p>
  
  <p>GENERAL</p>
  
  <pre class="lang-none prettyprint-override"><code>Request URL:http://localhost:3001/graphql
  Request Method:POST
  Status Code:200 OK
  Remote Address:[::1]:3001
  Referrer Policy:no-referrer-when-downgrade
  </code></pre>
  
  <p>RESPONSE HEADERS</p>
  
  <p>Cache-Control:max-age=0, private, must-revalidate
  Content-Type:application/json; charset=utf-8
  Transfer-Encoding:chunked
  Vary:Origin</p>
  
  <p>REQUEST HEADERS</p>
  
  <pre class="lang-none prettyprint-override"><code>Accept:*/*
  Connection:keep-alive
  Content-Length:87
  Content-Type:text/plain;charset=UTF-8 &lt;&lt;&lt; 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
  </code></pre>
  
  <p>REQUEST PAYLOAD</p>
  
  <pre class="lang-none prettyprint-override"><code>{query: "{↵ users {↵ first_name↵ __typename↵ }↵}↵", operationName: null}
  operationName
  :
  null
  query
  :
  "{↵  users {↵    first_name↵    __typename↵  }↵}↵"
  </code></pre>
  
  <hr>
  
  <p>So what I did to get some sort of response was to install the Chrome Extension <a href="https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en" rel="noreferrer">Allow-Control-Allow-Origin: *</a></p>
  
  <p>If <code>mode: 'no-cors'</code> is removed and this extension is active, data can be retrieved.</p>
  
  <hr>
  
  <p>In looking through the Apollo docs I'm unable to find much on this topic. I tried implementing the <a href="http://dev.apollodata.com/react/auth.html#Header" rel="noreferrer">Apollo Auth Header</a> but this simply produced the same errors as above. </p>
  
  <p>What in my Apollo code could be causing these errors? And what steps are there to fix the problem?</p>
  
  <p>Searching over GitHub issues and other Google searches are either for much-older versions of Apollo in which issues "have been addressed" or do not work when implemented.</p>
  
  <p><strong>Edit</strong></p>
  
  <p>Adding Ruby on Rails tag just in case there is more configuration needed in Rails. Upon researching the Apollo Client issues found <a href="https://github.com/apollographql/apollo-client/issues/2004" rel="noreferrer">Network error: Network request failed with status 0 - ""</a> This issued was resolved by the OP because of an issue on the backend. </p>