通过Heroku部署后无法使用的应用程序

发布于 2025-01-23 07:43:05 字数 1653 浏览 1 评论 0原文

我正在尝试将我的应用程序部署到我认为正在工作的Heroku。在通过Localhost测试我的应用程序时，它可以正常工作，所有内容都在发布。但是，在部署并替换了我所有的URL到Heroku之后，数量不起作用：

Giphy API不再起作用，
什么都不会发布（评论和喜欢工作，但帖子不工作），但

我尝试调试，但是什么都没有起作用。我要去哪里？请参阅下面的详细信息

应用程序： httpps://mitnickproject1-journal-app.netlify.app/ heroku：

” - 末端代码

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')
  }
}

后端代码

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

任何帮助都将不胜感激

原文

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:

The GIPHY API no longer works
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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

屌丝范 2025-01-30 07:43:05

我检查了您的代码，并在查看控制台时对其进行了测试。

您的GIPHY URL使用HTTP而不是https。 HTTP适合开发，但是实时网站需要使用HTTP。只需将所有HTTP URL切换到https即可。
您的服务器未设置为接受外部来源（又称CORS）的任何请求。要解决此问题，只需将app.use（cors（））添加到服务器文件。
别忘了将const cors = require（'cors'）放在顶部。