React中axios和fetch持续发送localhost网络请求如何解决？

• 无限循环请求的核心原因：你编写的useEffect没有传入依赖数组，每次组件渲染都会执行getJournalData函数发起请求。请求成功后调用setJournals更新组件状态，会触发组件重渲染，进而再次执行useEffect发起新的请求，形成死循环，所以会持续发送localhost请求。
• 调用fetch("/")返回index.html的原因：你在package.json中配置的proxy是React开发服务器的代理规则，默认规则下根路径/会优先返回前端单页应用的入口index.html文件（用于支持客户端路由），所以请求没有被转发到9000端口的后端服务，直接返回了前端文件。

1. 首先修复useEffect的依赖配置，添加空数组[]作为依赖项，让请求仅在组件首次挂载时执行一次：

useEffect(() => {
  getJournalData();
}, []); // 新增空数组依赖

2. 为了避免前后端路由冲突，建议给所有后端接口统一添加/api前缀：
   • 后端修改路由定义：

   // 原路由是"/"，修改为带前缀的路径
   router.get("/api/journals", async (req, res) => {
     Journal.find({}, function (err, journals) {
       if (err) {
         res.send("Something went wrong");
       }
       res.json(journals);
     });
   });
   

   • 前端请求时直接调用带前缀的路径即可，不需要填写完整的后端服务地址，proxy会自动将请求转发到9000端口，也不需要额外配置CORS：

   const getJournalData = () => {
     axios
       .get("/api/journals")
       .then((res) => {
         setJournals(res.data);
       })
       .catch((err) => console.error(err));
   };
   

内容的提问来源于stack exchange，提问作者Ravi Anand