MongoDB连接成功但无法获取集合数据，接口报连接重置/拒绝错误

你遇到的错误不属于CORS问题，CORS错误会在浏览器控制台明确报跨域拦截提示，当前的连接拒绝、空返回、ECONNRESET错误需要按以下步骤排查修复：

1. 确认后端服务正常启动 #

• 检查服务启动日志，必须同时出现Server started on port: 5000和MongoDB connected...两条日志才代表服务正常启动
• 先直接访问根路径http://localhost:5000/，如果无法返回API Running，说明服务未正常启动，优先排查端口占用、启动报错问题
• 端口占用排查命令：
  • Windows: netstat -ano | findstr "5000"
  • Mac/Linux: lsof -i :5000
    确认端口被Node进程占用，否则修改启动端口或者杀掉占用5000端口的其他进程。

2. 修复MongoDB查询逻辑漏洞 #

你当前的接口代码未做异常容错，当集合为空、或者第一条数据无tricks字段时会返回空甚至静默报错，修改src/api/skateboard_tricks.js代码如下：

router.get('/', (req, res) => {
    skate_tricks.find({}, (err, result) => {
        if (err) {
            return res.status(500).send({error: err.message});
        }
        // 增加返回结果容错
        if (!result || result.length === 0) {
            return res.send([]);
        }
        const trick_list = result[0];
        res.send(trick_list.tricks || []);
    });
});

同时确认SkateTrick模型定义的集合名称、字段结构和MongoDB数据库内的实际数据完全匹配，没有拼写错误。

3. 修复前端调用逻辑问题 #

当前的useEffect依赖设置错误会触发无限循环，同时loading状态设置逻辑有误，修改前端代码如下：

const [trickList, setTrickList] = useState([]);
const [loading, setLoading] = useState(false);

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

const getTrickData = async () => {
    try {
        setLoading(true);
        const res = await sfsApiCall.get('api/skateboard_tricks');
        console.log(res);
        setTrickList(res.data);
    } catch (err) {
        console.error(err.message);
    } finally {
        setLoading(false);
    }
};

// 改成空数组依赖，仅在组件挂载时调用一次
useEffect(() => {
    getTrickData();
}, []);

4. 额外排查项 #

如果完成以上步骤还是出现连接错误，临时关闭本地防火墙测试是否为防火墙拦截了本地端口请求，同时确认MongoDB数据库内skate_tricks集合确实存在有效数据。

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