Quantcast
Channel: Active questions tagged heroku - Webmasters Stack Exchange
Viewing all articles
Browse latest Browse all 44

Fetch doesn't seem to work in Heroku deployed app

0
0

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

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.


Viewing all articles
Browse latest Browse all 44

Latest Images

Trending Articles





Latest Images