title: Unhandled Rejection (TypeError): Failed to fetch
body: <p>I'm starting in web development.
  I used create-react-app to create my project.
  I am able now to render different pages and to have routes between the pages which is perfect.</p>
  
  <p>Now, I am trying to add the backend part of the project.
  I am using express and probably will use MongoDB but I can't figure out exactly how to manage the calls to server from client.
  Here is my example : 
  1. in App.js I have the following, just a simple login page :</p>
  
  <pre><code>import React, { Component } from 'react';
  import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
  import logo from './logo.svg';
  import RaisedButton from 'material-ui/RaisedButton';
  import TextField from 'material-ui/TextField';
  import './App.css';
  import api from './api'
  import { browserHistory } from 'react-router'
  
  class App extends Component {
  
    goToUsers () {
      api.login()
    }
  
    render() {
      return (
        &lt;MuiThemeProvider&gt;
          &lt;div className="App"&gt;
            &lt;div className="App-header"&gt;
              &lt;img src={logo} className="App-logo" alt="logo" /&gt;
              &lt;h2&gt;Welcome to React&lt;/h2&gt;
            &lt;/div&gt;
            &lt;p className="App-intro"&gt;
              To get started, edit &lt;code&gt;src/App.js&lt;/code&gt; and save to reload.
            &lt;/p&gt;
            &lt;br /&gt;
            &lt;br /&gt;
            &lt;TextField hintText="Login" /&gt;
            &lt;br /&gt;
            &lt;TextField hintText="Password" type="password" /&gt;
            &lt;br /&gt;
            &lt;br /&gt;
            &lt;RaisedButton label="Login" onTouchTap={this.goToUsers}/&gt;
          &lt;/div&gt;
        &lt;/MuiThemeProvider&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>the login function is supposed obviously to fetch data from the client but for now I just have a simple function in api.js where I want to centralize my api functions:</p>
  
  <pre><code>class Api {
    login () {
      fetch('localhost:3000/users')
      .then(response =&gt; {
        if (!response.ok) {
          throw new Error(response.statusText)
        }
        return response.json()
      })
    }
  }
  
  export default new Api()
  </code></pre>
  
  <p>and finally the index.js </p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import injectTapEventPlugin from 'react-tap-event-plugin';
  import { Router, Route, IndexRoute, IndexRedirect, browserHistory, Link } from 'react-router'
  
  import App from './App';
  import Users from './users';
  
  injectTapEventPlugin();
  
  
  ReactDOM.render(
    &lt;Router history={browserHistory}&gt;
      &lt;Route path="/" component={App} /&gt;
      &lt;Route path="/Users" component={Users} /&gt;
    &lt;/Router&gt;
    , document.getElementById('root'))
  </code></pre>
  
  <p>I am not copying users.js and other objects for simplicity but all classes works fine when going to <a href="http://localhost:3000/" rel="noreferrer">http://localhost:3000/</a> or <a href="http://localhost:3000/users" rel="noreferrer">http://localhost:3000/users</a></p>
  
  <p>however when I click on the button, I get the error Unhandled Rejection (TypeError): Failed to fetch.</p>
  
  <p>Any idea what I am missing?</p>