React Native应用从MongoDB Atlas获取视频时卡在加载界面

问题描述 #

使用React Native结合Expo开发简易社交应用，核心功能为视频上传分享。在“Explore”页面加载存储于MongoDB Atlas的已上传视频时，页面持续显示加载图标，最终请求超时。

配置背景 #

• 后端基于Express.js实现视频上传与获取逻辑
• 通过Multer中间件处理multipart/form-data，借助multer-gridfs-storage引擎将文件存入MongoDB GridFS
• 手机端视频上传功能正常，MongoDB的test数据库中已生成uploads.files和uploads.chunks集合，且包含上传的视频文件
• 可正常加载服务器返回的静态文本（如"Hello World!"），但视频获取接口完全失效

已完成的排查动作 #

• 确认服务器正常运行，MongoDB连接状态正常
• 终端日志显示/api/videos路由已触发（打印"Get videos route hit"）
• 数据库中存在目标视频文件
• 浏览器开发者工具无该请求的网络记录

针对性排查与解决方案 #

1. 定位后端接口的阻塞点 #

终端仅打印路由触发日志，说明接口进入后可能卡在查询或响应环节，需添加详细日志定位问题：

// 在GridFS查询逻辑前后增加日志
console.log("开始从GridFS查询视频文件");
gfs.files.find().toArray((err, files) => {
  console.log("GridFS查询完成，错误信息:", err, "查询到文件数量:", files?.length);
  // 后续响应逻辑
});

重点检查是否存在未处理的Promise阻塞或回调未正确返回响应的情况，比如查询完成后未调用res.json()/res.send()，导致前端请求一直挂起超时。

2. 验证前端请求的有效性 #

React Native调试工具可能存在网络记录不显示的情况，需主动验证请求配置：

• 确认请求URL使用电脑局域网IP（Expo真机调试不能用localhost）
• 在前端请求代码中添加错误捕获，打印详细错误信息：

try {
  const response = await fetch('http://你的服务器局域网IP:端口/api/videos');
  console.log("请求响应状态码:", response.status);
  const data = await response.json();
  console.log("获取到的视频数据:", data);
} catch (error) {
  console.error("请求失败详情:", error);
}

3. 修复GridFS文件的响应逻辑 #

如果后端查询到文件但无法正确返回，需检查响应方式：

• 若返回视频元数据，需附带可访问的视频URL（如通过单独接口流式返回视频文件）
• 示例后端响应代码：

// 返回所有视频的元数据与访问链接
app.get('/api/videos', (req, res) => {
  gfs.files.find().toArray((err, files) => {
    if (err) return res.status(500).json({ err });
    if (!files?.length) return res.status(404).json({ message: "无视频文件" });
    
    const videoList = files.map(file => ({
      id: file._id,
      filename: file.filename,
      url: `http://你的服务器IP:端口/api/videos/${file._id}`
    }));
    res.json(videoList);
  });
});

// 单个视频的流式响应接口
app.get('/api/videos/:id', (req, res) => {
  gfs.files.findOne({ _id: mongoose.Types.ObjectId(req.params.id) }, (err, file) => {
    if (err || !file) return res.status(404).json({ message: "视频不存在" });
    
    res.set('Content-Type', file.contentType);
    const readStream = gfs.createReadStream(file.filename);
    readStream.pipe(res);
  });
});

4. 排查跨域与网络权限问题 #

• 后端需配置CORS中间件允许前端访问：

const cors = require('cors');
app.use(cors({ origin: '*' })); // 开发环境临时使用，生产环境需指定具体域名

• 确保手机与电脑在同一局域网，服务器端口未被防火墙拦截
• 检查React Native项目的网络权限：iOS需在info.plist中开启HTTP请求权限，Android需在AndroidManifest.xml中添加<uses-permission android:name="android.permission.INTERNET" />

5. 确认GridFS集合名称一致性 #

检查后端初始化GridFS时的集合名称是否与数据库中实际存在的集合匹配，比如初始化代码中指定{ collection: 'uploads' }，则数据库中应为uploads.files和uploads.chunks，名称不匹配会导致查询无结果。

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