App failing to work after deployment via Heroku

Question

I'm trying to deploy my app to Heroku in which I believe is working. Whilst testing my app via localhost it works fine, everything is posting. However after deployment and replacing all my URLs to Heroku, number of things are not working:

1. The GIPHY API no longer works
2. Nothing would post (comments and likes work but not the posting)

I have tried debugging however nothing has worked. Where am I going wrong? Please see below for details

app: https://mitnickproject1-journal-app.netlify.app/ heroku: https://journal-post-pl.herokuapp.com/print

Front-end code

const formEl = document.querySelector('form');
formEl.addEventListener('submit', postFormData)
let count=0;

async function postFormData(e) {
  const current= new Date().toLocaleString() 
  const formData= new FormData(formEl) // console.log this to check what format this is in 
  const formDataSerialised=Object.fromEntries(formData) //console.log this to see what this does
  const jsonObject = {...formDataSerialised, "dateTime": current, "comment": [], "EmojiCount": [0,0,0], "gifLink":gifLink, 'id': count}
  console.log(JSON.stringify(jsonObject, null, 2))
  try{
    const options = { method: 'POST', 
    body: JSON.stringify(jsonObject),
    headers: {
      'Content-Type': 'application/json'
    }
  }

  await fetch("https://journal-post-pl.herokuapp.com/test", options);
    // const response = await fetch("https://journal-post-pl.herokuapp.com/test", {

    // })
    // const json = await response.json();
  }catch(err){
    console.error(err);
    alert('There was an error')
  }
}

Back End Code

app.post('/test', (req, res) => {
    formData.push(req.body)
    console.log(formData)
    writeToJson();
    res.json({success: true})
})

Any help would be appreciated

Answer 1

I checked out your code and tested it out while looking at the console.

1. Your GIPHY urls are using http instead of https. http is fine for development, but live site needs to use https. Just switch all your http urls to https and that will work.

2. Your server isn't set up to accept any requests from an outside source (AKA CORS). To fix this, just add app.use(cors()) to your server file. Don't forget to put const cors = require('cors') at the top.