使用Mongoose从数据库取数据却返回查询语句，React端报404错误

一、解决Mongoose find() 返回查询语句而非数据的问题 #

Mongoose的Model.find()方法默认返回的是Query对象（用于链式调用扩展查询条件），不会直接返回数据库数据。要获取实际数据，可使用以下两种方式：

方式1：使用回调函数 #

// 假设你的Model是User
User.find({}, (error, result) => {
  if (error) {
    console.error('查询失败:', error);
    return;
  }
  console.log('数据库数据:', result); // 此处为实际返回的数据数组
});

方式2：使用async/await（推荐） #

将查询逻辑放在async函数中，通过await获取结果：

async function fetchData() {
  try {
    const result = await User.find({}); // 等待查询完成，返回数据数组
    console.log('数据库数据:', result);
  } catch (error) {
    console.error('查询失败:', error);
  }
}

fetchData();

二、解决React应用访问404错误 #

场景1：Express未正确托管React静态文件（生产环境） #

如果React已打包为静态文件，需在Express中配置静态资源托管，并添加SPA路由 fallback：

const path = require('path');

// 托管React打包后的静态文件（路径根据项目结构调整）
app.use(express.static(path.join(__dirname, '../client/build')));

// 所有非API请求返回React的index.html，避免SPA路由刷新404
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '../client/build/index.html'));
});

场景2：前后端开发环境跨域/路由不匹配 #

如果前后端分开运行（如React在3000端口，Express在5000端口）：

1. 在React项目的package.json中添加代理配置，自动转发API请求到后端：

   "proxy": "http://localhost:5000"
   

2. 确保前端请求的API路径与Express定义的路由完全一致，比如前端请求/api/users，后端需对应：

   app.get('/api/users', async (req, res) => {
     const data = await User.find({});
     res.json(data);
   });
   

场景3：Express路由顺序错误 #

Express路由匹配是从上到下的，需确保API路由放在静态托管和SPA fallback路由之前：

// 先定义API路由
app.get('/api/users', ...);

// 再托管静态文件
app.use(express.static(...));

// 最后设置SPA fallback路由
app.get('*', ...);

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