使用Axios Get请求调用Mongoose接口出现404错误求助

问题描述 #

React前端通过Axios发起GET请求调用Mongoose后端接口时，返回404页面不存在错误。已知Postman测试后端接口可正常返回数据，且React调用外部链接也能成功获取数据，附上前后端代码请求排查问题原因：

后端代码 #

const app = require("./app");
const mongoose = require("mongoose");
app.set("port", process.env.PORT || 3000);

const mongoURI = "mongodb://localhost:27017/get-now";
mongoose.connect(mongoURI, { 
    useNewUrlParser: true,
    useUnifiedTopology: true
})
.then(() => console.log(`database connected`))
.catch(err => console.log(err));
const port = process.env.PORT || 3000;
app.listen(port, () => {console.log(`the server is ${port}`)});

routes.get("/alldata" , async (req, res) => { 
    try {
        const foodDatas = await Data.find({})
        res.send(foodDatas);
        console.log(foodDatas)
    } catch (error){
        res.status(500).json({
            Error: error
        })
    }
});

前端(Reactjs)代码 #

const fetchData = async () => {
    axios.get('http://localhost:3000/alldata')
  .then((res) => {
    console.log(res.data) 
}).catch (err => {
  console.log(err)
})
    }
  useEffect(() => {
    fetchData()
  }, [])

目前所有尝试均失败，返回404错误页且data为undefined。

排查方向及解决方案 #

• 后端路由注册顺序错误
  你贴出的后端代码中，app.listen(port) 执行在路由定义 routes.get("/alldata") 之前。Node.js的Express服务器调用listen后就已启动，后续添加的路由不会被注册到服务器实例中，导致请求/alldata时找不到对应路由，返回404。
  解决：将路由定义代码移到app.listen之前，确保服务器启动前所有路由都已完成注册。

• 端口冲突导致后端未运行在目标端口
  React开发环境默认占用3000端口，如果后端也配置为3000端口，启动时会被React抢占，后端实际可能启动失败或自动切换到其他端口。此时前端请求http://localhost:3000/alldata访问的是React开发服务器，而非后端接口，因此返回404。
  解决：

  1. 修改后端端口（比如改为3001），同时将前端请求地址改为http://localhost:3001/alldata；
  2. 或修改React启动端口，在package.json的start命令中添加端口配置：Windows系统用"start": "set PORT=3001 && react-scripts start"，Mac/Linux系统用"start": "PORT=3001 react-scripts start"。

• 路由未挂载到Express实例
  代码中仅定义了routes.get("/alldata")，但缺少将routes挂载到app的代码（比如app.use("/", routes)）。如果没有这一步，路由无法被Express实例识别，会导致404错误。
  解决：在路由定义后添加app.use("/", routes)，确保路由被Express正确加载。

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