Fetch doesn't seem to work in Heroku deployed app

Question

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=https
2022-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=https
2022-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=https
2022-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=https
2022-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"); ?>

Img of code structure

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.