title: ReactJS: TypeError: Failed to Fetch (Not CORS related)
body: <p>I am trying to a simple get request using the Fetch library in React.</p>
  
  <p>I have the following code (shortened for brevity)</p>
  
  <pre><code>class App extends Component {
   constructor(props) {
     super(props);
       this.state = {
         username: "",
         password: "",
         stories: [],
         isLoggedIn: false
        };
      }
  
     getAllStories = async () =&gt; {
        let res = await fetch(storiesAPI, {header ('Access-Control-Allow-Origin: *')})
       let json = await res.json()
       await this.setState({stories: json})
       console.log(this.state.stories) 
      }
  
  componentDidMount (){
     if (localStorage.token) {
      this.setState({
      isLoggedIn: true
    });
    } else {
      this.setState({
      isLoggedIn: false
    });
    }
    this.getAllStories();
   }
  
   render() {
    return (
      &lt;div&gt;
         &lt;h1&gt;Hi&lt;/h1&gt;
      &lt;/div&gt;
      )
    }
  
    export default App;
  </code></pre>
  
  <p>As soon as the component mounts I get a failed to fetch error, which I initially thought was because of a CORS error,</p>
  
  <p><a href="https://i.stack.imgur.com/YE7lb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YE7lb.png" alt="picture of error"></a></p>
  
  <p>because currently my <code>server.js</code> file looks like so:</p>
  
  <pre><code>const express = require('express')
  const parser = require('body-parser')
  const cors = require('cors')
  const passport = require('./config/passport')()
  
  
  const app = express()
    var corsOptions = {
    origin: "*",
    optionsSuccessStatus: 200 // some legacy 
    browsers (IE11, various SmartTVs) choke on 204
    };
  
  app.set('port', process.env.PORT || 4000)
  app.use(cors(corsOptions));
  app.use(parser.json())
  app.use(passport.initialize())
  
  
  app.use(require('./routes/index'))
  
  app.listen(app.get('port'), () =&gt; {
   console.log('Server listening on port ' + 
  app.get('port'))
  })
  </code></pre>
  
  <p>I thought that I was doing everything right, but the following is what I've tried:</p>
  
  <p>1.fetch headers from <code>let res = await fetch(storiesAPI, {header ('Access-Control-Allow-Origin: *')})</code> to let res = await fetch(storiesAPI, { credentials: "same-origin" })</p>
  
  <ol start="2">
  <li>Removing the CORS option</li>
  </ol>
  
  <p>3.Adding a proxyurl in reference to a stack overflow post</p>