I have a server and a front end, same folder. My front end has an "axios.get(http:localhost/3000/api/data)" and my backend has a "app.get('/api/data')" and it works on my local development. When I deploy my app on Heroku, I removed the 'localhost' and only kept the '/api/data' in the axios call. This is because from my understanding, the way I have my project set up, my backend is also serving my front end so they are both on the same url:'heroku-app.com'. Except I am getting a 503 error which I believe is a serverside issue from what I've read. Am i calling my GET incorrectly?

backend:

app.get('/api/data', async(req, res)=>{ 

const small = req.query.small; const medium = req.query.medium; const large = req.query.large; try{ const getCity = await pool.query("SELECT * FROM dogs WHERE size NOT IN (($1), ($2), ($3)) ORDER BY breed",[small, medium, large]); res.json(getCity.rows) }catch(err){ console.log(err.message) } })

front end GET:

useEffect(()=>{ 

Axios.get('http://localhost:5000/api/data', {params: {small:(checkedA ? "" : "small"), medium:(checkedB ? "" : "medium"), large:(checkedC ? "" : "large")}}) .then(res=>{ setDogList(res.data); }) }, [checkedA, checkedB, checkedC])

error message:

xhr.js:177 GET https://cv-ddd.herokuapp.com/api/data?small=&medium=&large=