title: Reactjs Heroku can't recognise my heroku domain name from Git repo can't fetch data
body: <p>Good Day, I am trying to deploy my Reactjs Frontend and Nodejs Backend and Mongodb Atlas Project to heroku as an heroku app. I was using heroku CLI but due to lots of commits &amp; pushes to Git led to an error saying cannot push to 'Head'.</p>
  <p>now I have connected heroku using Github, I upload the entire build project to Git hub using that to deploy my app to heroku.<br />
  But When I deploy app on heroku, It does not fetch data when component mounts</p>
  <p>I was using localhost:5252 at my local machine all was working fine when getting data from Mongodb local now I am using Mongodb atlas to fetch my data using Mongoose</p>
  <p>But when I inspect my Google chrome it gives me  <code>Failed to Fetch</code> and when further inspect the error file in Google chrome it shows my localhost:5252 to be in the code But I have already changed the url of fetch to the heroku url or domain in the Github repo files which i am using to deploy with heroku, It doesn't change that in my inspect Google chrome browser</p>
  <p>here is the image which show my Github repo file code and on left side My chrome browser:</p>
  <p><a href="https://i.stack.imgur.com/wMeM5.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wMeM5.jpg" alt="enter image description here" /></a></p>
  <p>things I tried because I think this the Cors error:</p>
  <ol>
  <li>using <code>app.use(cors({origin:'&lt;myherokudomain&gt;'}))</code> but still does not work</li>
  <li>added proxy to package.json file of my backend to heroku domain</li>
  <li>added In my Frontend where I fetch data , in the fetch method added allow origin in headers</li>
  </ol>
  <p>please see my files :</p>
  <p>app.js</p>
  <pre><code>require('dotenv').config();
  const express = require('express')
  const session = require(&quot;express-session&quot;)
  const bodyParser = require('body-parser')
  const cors = require('cors')
  const zomatoRoutes = require('./Routes/zomato')
  const paymentRoutes = require('./Routes/payments')
  const mongoose = require('mongoose')
  const passport = require(&quot;passport&quot;)
  const LocalStrategy = require(&quot;passport-local&quot;)
  const passportLocalMongoose = require(&quot;passport-local-mongoose&quot;)
  const MongoStore = require('connect-mongo');
  //const MongoClient = require(&quot;mongodb&quot;).MongoClient;
  //var MongoDBStore = require('connect-mongodb-session')(session);
  
  
  
  const User = require('./Models/user') 
  
  // create express server
  var app = express()
  
  // add middleware before routes
  app.use(bodyParser.json())
  app.use(cors({
      origin: 'https://v-restaurant.herokuapp.com'
  }))
  
  //connect to mongoDB
  
  const uri = process.env.MONGO_URI;
  
  console.log(uri, &quot;this is the uri&quot;)
  console.log('this is hi from GitHub')
  
  const options = {
      useNewUrlParser: true,
      useUnifiedTopology: true,
      dbName:'zomato1'
  }
  
  mongoose.connect(uri, options).then(() =&gt; {
      console.log('mongoose connected')
  }).catch(e =&gt; console.log(e))
  
  
  app.use(session({
      secret: &quot;this is unambigous secret&quot;,
      resave: false,
      saveUninitialized: false,
      cookie: { maxAge: 24*60*60*1000 },
      store: MongoStore.create({ 
          client: mongoose.connection.getClient(),
          dbName:'zomato1',
          autoRemove: 'disabled',
          ttl: 14 * 24 * 60 * 60
       })
      
  }));
  
  app.use(passport.initialize());
  app.use(passport.session());
   
  
  
  // middleware routes
  app.use('/zomato', zomatoRoutes)
  app.use('/payment', paymentRoutes)
  
  
  // heroku configuration
  if(process.env.NODE_ENV==&quot;production&quot;){
      const path = require('path')
      app.use(express.static(path.resolve(__dirname, &quot;vrestaurant/build&quot;)))
      console.log(path.resolve(__dirname, &quot;vrestaurant/build/index.html&quot;),'this is the path that needs to be resolved')
      app.get(&quot;/*&quot;, (req, res) =&gt; {
          res.sendFile(path.resolve(__dirname, &quot;vrestaurant&quot;, &quot;build&quot;, &quot;index.html&quot;))
      })
  }
  
  //listen to a port
  app.listen( process.env.PORT , () =&gt; {
      console.log('express app is up and running on port log: ', process.env.PORT)
  })
  
  </code></pre>
  <p>my Restaurant main page where I am fetch data on componentdidmount</p>
  <pre><code>Modal.setAppElement('#root')
  export default class Vrestauranthome extends Component {
  
      static contextType = MenuCartContext
  
  
      constructor(props) {
          super(props)
  
  
          this.state = {
              locations: [],
              restaurants: [],
              isOpen: false,
              registerOpen: false,
              registerMessage: '',
              currentUsername: 'Guest',
              usernameLogin: '',
              passwordLogin: '',
              useremail: '',
              userAddress: '',
              isHovering: false,
              RestaurantSearchList: []
          }
  
  
  
      }
  
  
  
      componentDidMount() {
  
          
          this.setState({ currentUsername: localStorage.getItem('user') })
  
          fetch('https://v-restaurant.herokuapp.com/zomato/locations', { method: 'GET', headers: {&quot;Access-Control-Allow-Origin&quot;: &quot;*&quot;} })
              .then(response =&gt; response.json())
              .then(data =&gt; {this.setState({ locations: data.data })})
  
          const Localuser = localStorage.getItem('user')
  
          this.setState({ currentUsername: Localuser })
  
  
      }
  
  
  
      fetchRestaurants = (event) =&gt; {
  
          fetch(`https://v-restaurant.herokuapp.com/zomato/restaurants/${event.target.value}`, { method: 'GET', headers: {&quot;Access-Control-Allow-Origin&quot;: &quot;*&quot;} })
              .then(response =&gt; response.json())
              .then(data =&gt; {
                  this.setState({ restaurants: data.result })
                  this.setState({ RestaurantSearchList: data.result })
              })
              .catch(error =&gt; error)
  
          this.setState({ isHovering: true })
      }
  
  </code></pre>
  <p>Please note that I have merged my frontend into my backend and then I build my Frontend using npm run build.
  Then I uploaded my entire code on Github then I linked the Github repo to Heroku then deployed it.</p>
  <p>When I using other tools like Postman and browser I am getting my data from Mongodb Atlas.</p>
  <p>don't know why it is not working or using my heroku domain defined in Github files and fetching the data and displaying it on my frontend homepage.</p>
  <p>Any help would be appreciated.Thank you.</p>