This is an issue that im bringing over from the general stackoverflow because I was told it should be asked here instead. The original issue is moreless gone now. The issue now is that when I am opening my app through Heroku, I normally have fetch functions that have methods of Post and in maybe future Get. I end up getting these server 404 errors in the browser inspection(f12),
Failed to load resource: the server responded with a status of 404 (Not Found) //(this was with my updateClientScore, which is a app.post('updateClientScore,...);
While the Heroku logs give this(i did a snippet)
2022-07-30T19:10:20.299760+00:00 heroku[router]: at=info method=GET path="/public/style.css" host=dice-roll-chun.herokuapp.com request_id=e785dc87-106c-4762-9c3a-4ed7f997b089 fwd="65.19.77.86" dyno=web.1 connect=0ms service=1ms status=304 bytes=196 protocol=https2022-07-30T19:10:20.298245+00:00 heroku[router]: at=info method=GET path="/public/script.js" host=dice-roll-chun.herokuapp.com request_id=96edb784-3bbd-4dc5-b335-c857e4e5bf2f fwd="65.19.77.86" dyno=web.1 connect=0ms service=0ms status=304 bytes=196 protocol=https2022-07-30T19:10:20.380579+00:00 heroku[router]: at=info method=POST path="/updateClientScore" host=dice-roll-chun.herokuapp.com request_id=cac7759c-3794-4f72-9aac-6c8a742ec968 fwd="65.19.77.86" dyno=web.1 connect=0ms service=0ms status=404 bytes=360 protocol=https2022-07-30T19:10:36.379082+00:00 heroku[router]: at=info method=POST path="/diceRoll" host=dice-roll-chun.herokuapp.com request_id=76a2083e-aaf6-43ff-a8aa-b0c950101c18 fwd="65.19.77.86" dyno=web.1 connect=0ms service=0ms status=404 bytes=360 protocol=https2022-07-30T19:10:36.380907+00:00 app[web.1]: 10.1.21.30 - - [30/Jul/2022:19:10:36 +0000] "POST /diceRoll HTTP/1.1" 404 196 "https://dice-roll-chun.herokuapp.com/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36
This is the code for the functions in question
async function rollDice(){ //package it as post const img1 = document.getElementById("images"); const img2 = document.getElementById("images2"); const dataPk = {img1,img2}; const options = { method: 'POST', headers: {'Content-Type' : 'application/json' }, body: JSON.stringify(dataPk), }; //send and receive response const response = await fetch('/diceRoll',options); const diceData = await response.json(); //set local client data with the datapackage received from the server document.getElementById("images").setAttribute("src",diceData.img1); document.getElementById("images2").setAttribute("src",diceData.img2);}async function getData(){ const leaderText = document.getElementById("leaderboard"); const dataPk = {leaderText}; const options = { method: 'POST', headers: {'Content-Type' : 'application/json', }, body: JSON.stringify(dataPk), }; const response = await fetch('/updateClientScore',options); const scoreText = await response.json(); document.getElementById("leaderboard").innerHTML = scoreText.leaderText;}
//php is short<?php include_once("public/index.html"); ?>
I'm new to web dev because this was a surprise test given to me.I'm Using Node.JS and html+css+javascript to do this with Heroku as the host and AWS for my data storage. Any help is appreciated. I'll update this if I make any progress.