title: Not receiving the data from Node JS and use it in React JS
body: <p>I'm trying to figure out how to connect NodeJS and send some data to React JS for it to use. The information is being sent when I access the backend, but React JS receives an empty object {}. I'm not sure what I'm doing wrong. Might the problem be related to CORS? Or do I have to use JSON.parse(r)? Not sure.</p>
  
  <p>index.js</p>
  
  <pre><code>const a = "sup"
  
  app.get("/", (req,res)=&gt;{
      console.log("someone is here")
      res.status(200).json({
          data:a
      })
  })
  
  
  app.listen(3000, ()=&gt;{
      console.log("Server is running")
  })
  </code></pre>
  
  <p>Homepage.jsx</p>
  
  <pre><code>class Homepage extends Component {
  
      state = {
          authenticated: false,
          data:""
      };
  
  
  
      async componentDidMount(){
          const url = "http://localhost:3000"
          const r = await fetch(url, {
              mode: "no-cors",
              method: "GET",
              headers: 
                {"Access-Control-Allow-Origin": "*"}
  
            })
          const data = await JSON.stringify(r)
          console.log(data)
      }
  
      render() { 
  
  
          return ( &lt;h1&gt;{this.state.data}&lt;/h1&gt; );
      }
  }
  </code></pre>
  
  <p><strong>UDPATE:</strong></p>
  
  <p>I had a port issue usage issue and incorrect usage of componentDidMount(). I managed to improve the code as recommended by users. NodeJS and ReactJS were pointing to port 3000. I reassigned the ports (NodeJS:3000, ReactJS:4000). ReactJS is now making a fetch call to "<a href="http://localhost:3000" rel="nofollow noreferrer">http://localhost:3000</a>". However, I now get 2 errors:</p>
  
  <pre><code>1) Failed to load resource: net::ERR_EMPTY_RESPONSE
  2) Uncaught (in promise) TypeError: Failed to fetch
  </code></pre>
  
  <p><strong>index.js</strong></p>
  
  <pre><code>const express = require("express")
  const app = express()
  const cors = require("cors")
  
  const a = "sup"
  
  app.use(cors({
          origin:"http://localhost:4000",
          methods:"GET,HEAD,PUT,PATCH,POST,DELETE",
          credentials:true
      }))
  
  app.use((req,res,next)=&gt;{
      res.header("Access-Control-Allow-Origin", "*")
      res.header("Access-Control-Allow-Headers",
      "Origin, X-Requested-With, Content-Type, Accept, Authorization")
  })
  
  app.get("/", (req,res)=&gt;{
      console.log("someone is here")
      res.status(200).json({
          data:a
      })
  
  })
  
  
  app.listen(3000, ()=&gt;{
      console.log("Server is running")
  })
  </code></pre>
  
  <p><strong>Homepage.jsx</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  
  class Homepage extends Component {
  
      state = {
          data:[]
      };
  
       componentDidMount(){
          const url = "http://localhost:3000"
          fetch(url)
          .then(r=&gt;r.json())
          .then(data=&gt;this.setState({data}))
  
      }
  
      render() { 
          return ( &lt;h1&gt;{this.state.data ? this.state.data : "loading"}&lt;/h1&gt; );
      }
  }
  
  export default Homepage;
  </code></pre>