从MongoDB的products集合取数据返回HTML模板而非数据，求排查方向

我尝试从MongoDB的products集合中获取数据，但未得到包含数据的数组或对象，反而返回了一个HTML模板。已确认数据库连接正常，请问这可能与什么因素有关？

相关代码 #

Product模型 #

const mongoose = require('mongoose');

const productSchema = new mongoose.Schema({
  title: String,
  price: Number,
  quantity: Number,
});

const Product = mongoose.model("products", productSchema);

module.exports =  Product ;

服务端代码 #

const express = require('express');
const app = express();
const  Product  = require("./models/Products");

app.get("/api/products", (req, res) => {
  Product.find((error, data) => {
    if (!error) {
      res.status(200).send(data);
    } else {
      res.status(500).send(error);
    }
  });
});

客户端Axios实例 #

import axios from "axios";

const axiosInstance = axios.create({
  baseURL: 'http://localhost:8080',
});

export default axiosInstance;

客户端请求代码 #

useEffect(() => {
    const fetchData = async () => {
      const data = await axios.get("/api/products");
      console.log('product >>>', data);
    }
    fetchData();
  }, []);

相关截图 #

可能的原因及解决方案 #

• 客户端未使用自定义Axios实例：你创建了带正确baseURL的axiosInstance，但请求时用的是全局axios.get，导致请求路径错误（比如请求到了前端SPA的路由），返回HTML模板。修改客户端请求代码为：

  const data = await axiosInstance.get("/api/products");
  

• 服务端路由优先级问题：如果服务端同时托管前端静态文件（比如用express.static），需确保API路由定义在静态文件托管之前，否则所有请求都会匹配到前端的index.html。示例：

  // 先定义API路由
  app.get("/api/products", ...);
  // 再托管静态文件
  app.use(express.static('build'));
  

• 跨域配置缺失：若客户端和服务端存在跨域，浏览器可能拦截请求，部分场景下会返回前端错误页面HTML。服务端需添加CORS中间件：

  const cors = require('cors');
  app.use(cors());
  

• 请求路径/端口不匹配：确认服务端运行端口是8080，客户端请求的路径/api/products拼写正确，没有额外的前缀或后缀。

• 服务端数据库连接验证：虽然你说连接正常，可在服务端添加数据库连接日志，确认是否真的连接成功并能读取集合数据：

  mongoose.connect('mongodb://localhost:27017/your-db-name')
    .then(() => console.log('DB connected'))
    .catch(err => console.log('DB connection error:', err));
  

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