[Fixed] Express Server – cannot POST but can GET, mongoDB problem or backend server problem?

Issue

I recently deployed my first project, a MERN stack to heroku. However after deployment, I have been met with issues that weren’t present in development. A brief explanation of what my web does is that it takes data from mongoDB and allow user to add multiple filters to search through them. It also have the function that allow you to create new data and edit old data. The problem I have is that all function with POST is not working, they would fire but it would have the error of "net::ERR_CONNECTION_REFUSED" and "EditInfo.jsx:58 Error: Network Error at e.exports (createError.js:16)"
at XMLHttpRequest.p.onerror (xhr.js:84)in the network dev tool. However GET works just fine, which means my dynamically generated table would work, but I cannot make new or edit previous data (just as a side note, I cannot generate data for edit although i was able to generate the same data for previously metioned table. I think this is because I’m asking for the data thorough post and for the table through get).I think the issue isn’t from MongoDB since GET is working, so my guess would be I need to do some config to allow POST to my server. I’ll post some of the function that works and some that doesn’t. Any help or lead would be greatly appreciated, Thanks.

Here is one that works:
client side

useEffect(() => {
    fetch("/data").then(res => {
        if(res.ok) {
            return res.json();
        } else {
          console.error("Cannot asscess data")
        }
    })
    .then(jsonRes => setData(jsonRes))
    setError(0)
    setShowError(false)
    // eslint-disable-next-line react-hooks/exhaustive-deps
},[resetData])

Here is the server

router.route("/data").get((req,res) => {

    Disease.find({}, async(err, foundDisease) => {
        if(err) {
            console.error(err)
        } else {
        foundDisease.sort(function(a, b){
            var nameA=a.diseaseName.toLowerCase(), nameB=b.diseaseName.toLowerCase();
            if (nameA < nameB) //sort string ascending
             return -1;
            if (nameA > nameB)
             return 1;
            return 0;
           });
           res.json(foundDisease);}
})
})

Here is one that doens’t work:

Here is the client (I use post to get the data because I need to send the id of what info I need)

useEffect(() => {
        const idInfo = {id};
        axios.post('http://localhost:3001/info', idInfo)
            .then(function(res){
                setInput({
                diseaseName: res.data[0].diseaseName, 
                species: res.data[0].species,
                vector: res.data[0].vector,
                vectorName: res.data[0].vectorName,
                agent: res.data[0].agent,
                agentName: res.data[0].agentName,
                symptoms: res.data[0].symptoms,
                diagnosis: res.data[0].diagnosis,
                treatment: res.data[0].treatment,
                prognosis: res.data[0].prognosis,
                notes: res.data[0].notes
                
                })
                res=null
                
            })
            
             .catch(err => console.error(err))
            // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])

Here is the server

router.route("/info").post((req, res) => {
    console.log(req.body)
    const idInfo = req.body.id;
    console.log(idInfo);
    current_id = idInfo;

    Disease.find({_id: current_id})
        .then(foundId => res.json(foundId))
        .catch(err => console.error(err));
        
})

Solution

axios.post('localhost:3001/info', idInfo)

You’re posting to localhost instead of to the actual deployed server. You should either change this into an environment variable or just put ur heroku address there