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

Question

我的 React 应用程序从前端获取用户输入并通过 Axios 将其发送到后端，该信息将用于搜索 MongoDB。 我的应用程序适用于一些输入，例如 5-6 左右，然后它将停止工作而没有错误，我不知道出了什么问题以及如何修复它。

这是我的问题的一个示例，当页面加载并从 url 获取参数并将其发送到后端时，此 useEffect 将发生（参数更改取决于用户单击的链接）。 然后它将信息通过 axios 发送到后端，Info 用于搜索 MongoDB 并将动态生成页面的文本。 在用户单击大约 5 个不同的链接后，这将停止工作，并且生成的页面将停留在动态生成的最后一页上，尽管 url 中的参数仍在更改。 我添加了 console.log 以查看 useEffect 是否激活，每次单击链接时，console.log 都会在页面加载时工作。 任何线索都会有所帮助，谢谢！

前端运行在 3000 端口，后端运行在 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))}, [])

这是后台

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

这样，当您在开发中 fetch('/api/info') 时，开发服务器将识别它不是 static 资产，并将您的请求代理到 http://localhost:3001/api/info 作为后备。 开发服务器只会尝试将其 Accept header 中没有 text/html 的请求发送到代理。 方便的是，这避免了 CORS 问题和开发中这样的错误消息：

获取 API 无法加载 http://localhost:3001/api/info。 请求的资源上不存在“Access-Control-Allow-Origin”header。 因此，不允许访问 Origin 'http://localhost:3000'。 如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

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))}, [])