React Apollo problems with configuration

Question

Hello i'm trying to consume a query made with graphql into react with apollo but any time the component is loaded throws me this error:

Error: "Network error: NetworkError when attempting to fetch resource."

I'm trying to figure out why is not working properly. when i checked my server console showed me this message:

ActionController::RoutingError (No route matches [OPTIONS] "/graphiql"):

but if i go to http://localhost:3000/graphiql graphql server its running and working with all the queries.

the configuration of my index.js is:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter } from 'react-router-dom';

// 1
import { ApolloProvider } from 'react-apollo'
import { ApolloClient } from 'apollo-client'
import { createHttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'


// 2
const httpLink = createHttpLink({
  uri: 'http://localhost:3000/graphiql'
})


// 3
export const client = new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache()
})



ReactDOM.render(
    <ApolloProvider client={client}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
    </ApolloProvider>, 
    document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers:
serviceWorker.unregister();

the component that connect and consume the query is:

        // React
    import React, { Fragment } from 'react';

    // React apollo
    import { graphql } from 'react-apollo';
    import * as compose from 'lodash.flowright';

    // import queries
    import queries from './queries';

    // React bootstrap
    import { Container, Row, Form, Button } from 'react-bootstrap';



    class LoginForm extends React.Component {
        render() {

            const { posts } = this.props;
            console.log('que trae ', posts);
            return(
                <Fragment>
                <h1>hello</h1>
                </Fragment>
            );
        }
    }

    export default compose(
        graphql(queries.posts, { name: 'posts' }),
    )(LoginForm);

and the querie itself is:

    import gql from 'graphql-tag';

const queries = {
    posts: gql`
    query posts {
        title
    }
    `,
}

export default queries;