React项目无法展示MongoDB返回数据的问题求助

从你的描述来看，后端接口http://localhost:3001/read直接在浏览器访问正常，但React前端请求就报错，这几乎可以确定是**跨域资源共享（CORS）**的问题——浏览器的同源策略会阻止不同端口（React默认3000，后端3001）之间的请求交互。

下面是具体的解决步骤：

1. 在后端项目中安装并配置CORS中间件 #

首先，在你的后端项目根目录执行命令安装cors依赖：

npm install cors
# 或者用yarn
yarn add cors

然后修改你的server.js，引入并启用cors：

const express = require("express");
const app = express();
const mongoose = require("mongoose");
const BookModel = require("./models/book");
// 新增：引入cors
const cors = require('cors');

/// DATABASE CONNECTION
mongoose.connect(
  "mongodb://localhost:27017/excavate?readPreference=primary&appname=MongoDB%20Compass&ssl=false",
  { useNewUrlParser: true }
);

// 新增：启用cors，允许跨域请求
app.use(cors());

// 你的路由代码...
app.get("/read", async (req, res) => {
  BookModel.find({}, (err, result) => {
    if (err) {
      res.send(err);
    } else {
      res.send(result);
    }
  });
});

app.listen(3001, () => {
  console.log("You are connected!");
});

2. 修复前端的请求代码 #

把你前端App.js中注释掉的setBooks(response.data)恢复，同时优化错误捕获的日志，方便后续排查：

const [books, setBooks] = useState([])
const[searchTerm, setSearchTerm] = useState("")
const[selectedNote, setNote] = useState()

useEffect(()=> {
  Axios.get('http://localhost:3001/read')
    .then((response)=> {
      setBooks(response.data); // 恢复这行，把后端返回的数据存入state
      console.log("获取到的书籍数据：", response.data);
    })
    .catch((error)=>{
      console.log("请求出错详情：", error); // 打印具体错误信息，更容易定位问题
    })
}, [])

额外排查点 #

如果配置后还是有问题，可以检查这些地方：

• 确认后端服务确实在3001端口正常运行，终端没有报错
• 确认前端项目已经安装了axios依赖（执行npm install axios确保安装）
• 如果后续部署到生产环境，建议用反向代理（比如Nginx）统一域名，避免跨域问题，开发阶段用cors就足够了

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