React 中的 Axios/Backend 会在一段时间后停止工作且没有错误

Question

My React App takes user input from frontend and send it to backend via Axios where the info will be used to search through MongoDB. My App works fine for a few input, like around 5-6, then it will stop working with no error and I have no idea what is wrong and how to fix it.

Here is an example of my problem, this useEffect will happen when page load and take param from the url and send it to backend (the param change depends on what link the user clicks on). It will then send the information to backend via axios and the Info is used to search through MongoDB and will dynamically generate the page's text. After the user clicks on around 5 different links tho, this will stop working and the page generated will be stuck on the last page it was generated dynamically although the params in the url still change. I added console.log to see if useEffect was activating or not, and everytime I click on a Link, the console.log will work when the page load. Any lead will help, thanks!

frontend runs on port 3000 and backend runs on 3001

    useEffect(() => {
        const idInfo = {id};
        axios.post('http://localhost:3001/info', idInfo);
        console.log("testing")
    }, [])

 useEffect(() => {
        fetch("/info").then(res => {
            if(res.ok) {
                return res.json();
                
            }
        }).then(jsonRes => setGetId(jsonRes))}, [])

This is the backend

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

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

    Disease.find({_id: current_id})
        .then(foundId => res.json(foundId))
})

Answer 1

This way, when you fetch('/api/info') in development, the development server will recognize that it's not a static asset, and will proxy your request to http://localhost:3001/api/info as a fallback. The development server will only attempt to send requests without text/html in its Accept header to the proxy. Conveniently, this avoids CORS issues and error messages like this in development:

Fetch API cannot load http://localhost:3001/api/info. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

https://create-react-app.dev/docs/proxying-api-requests-in-development/

src/setupProxy.js

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:3001',
      changeOrigin: true,
    })
  );
};

---

useEffect(() => {
        const idInfo = {id};
        axios.post('/api/info', idInfo);
        console.log("testing")
    }, [])

useEffect(() => {
        fetch("/api/info").then(res => {
            if(res.ok) {
                return res.json();
                
            }
        }).then(jsonRes => setGetId(jsonRes))}, [])