无法将MongoDB/Express数据传递至React的问题求助

这个"Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0"错误其实很典型——它说明你的前端代码尝试把**非JSON格式的内容（大概率是HTML）**解析成JSON了。最常见的情况是你的请求根本没到达正确的Express接口，反而拿到了React开发服务器返回的index.html文件（开头就是<!DOCTYPE html>，第一个字符就是<）。下面一步步帮你排查解决：

1. 先解决端口冲突问题 #

看你的代码，Express监听的是3000端口，但React开发服务器默认也是用3000端口，这会导致其中一个服务根本启动不起来，或者请求发错了地方。

把Express的监听端口改成别的，比如3001：

app.listen(3001, function(){
  console.log('App server is listening on port 3001...');
});

2. 确保前端请求指向正确的接口 #

方案一：直接写完整URL #

在React的componentDidMount里，请求要明确指向Express的端口：

componentDidMount() {
  fetch('http://localhost:3001/movies')
    .then(res => {
      // 先检查响应状态是否正常
      if (!res.ok) throw new Error('请求失败');
      return res.json();
    })
    .then(movies => {
      this.setState({ movies }); // 更新组件 state
    })
    .catch(err => console.error(err));
}

方案二：配置React代理（更优雅） #

在React项目的package.json里添加一行代理配置，这样前端请求/movies时会自动转发到Express服务器：

"proxy": "http://localhost:3001"

之后前端请求就可以简写为fetch('/movies')，不用写完整URL了。

3. 修复Express接口的错误处理和响应格式 #

你的Express代码有个小问题：当数据库查询出错时，只打印了错误但没有给客户端返回任何响应，这会导致请求挂起，最终返回异常内容。另外用res.json()比res.send()更明确，能确保返回标准的JSON格式：

// 先确认你正确引入了movie模型
const movie = require('./models/movie'); // 路径根据你的项目结构调整

app.get('/movies', function(req, res){
  movie.find({}, function(err, allMovies){
    if(err){
      console.log(err);
      // 返回错误状态码和JSON格式的错误信息
      return res.status(500).json({ error: '获取电影数据失败' });
    } else {
      res.json(allMovies); // 明确返回JSON
    }
  })
});

4. 先验证接口本身是否正常 #

在浏览器地址栏直接访问http://localhost:3001/movies，看看是否返回预期的JSON数组。如果这里返回的是HTML或者错误页面，先把接口本身的问题解决，再去调试React端。

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