Javascript 数据未使用axios呈现/console.log，而是使用来自mongoDB的数据

我对端点的请求：

http://localhost:3200/api/posts/

使用POSTMAN返回一个对象数组，这些对象具有title、description和image的值

在我的前端，我制作了一个组件，试图使用axios和useEffect从react提取这些值，然后渲染它们

const Posts = () => {

  let [posts, setPosts] = useState([])
  console.log(posts)

      useEffect(() => {
        axios.get("http://localhost:3200/api/posts/")
            .then(({ data })=> {
       console.log('data====',data);
              setPosts(
         data
       );
     })
            .catch(err => {
              console.log(err);
            })
    }, []);

  return (
    <ul>
            {posts.map((item, index) => <li key={index}>{item.title}</li>)}
    </ul>
  );




}

const Posts=（）=>{
让[posts，setPosts]=useState（[]）
控制台日志（posts）
useffect（（）=>{
axios.get（“http://localhost:3200/api/posts/")
。然后（{data}）=>{
log（'data='，data'）；
路标(
数据
);
})
.catch（错误=>{
控制台日志（err）；
})
}, []);
返回(

{posts.map（（item，index）=>
{item.title}
）}

);
}

我在获取数据的表单下方呈现帖子组件，标题显示，但组件不加载任何数据。。

返回(
标题
描述
上传猫模因
提交
查看您的帖子
);
};

我得到这个错误：

错误：XMLHttpRequest.handleError（xhr.js:80）处的createError（createError.js:17）处出现网络错误

---

允许在后端使用cors，并设置如下标题

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept"
  );
  next();
});

---

你能发布它吗，你在console.log中得到了什么（'data='，data）<代码>错误：在XMLHttpRequest.handleError（xhr.js:80）的createError（createError.js:17）处出现网络错误。您可以检查服务器是否正在运行吗。此错误通常发生在服务器未运行时。我看到您的数据是以db为单位的，但您无法获取它。请使用（函数（req，res，next）{res.header（“访问控制允许源代码”，“*”）；res.header（“访问控制允许源代码”，“源代码，X-request-With，内容类型，Accept”）；next（）；}）；谢谢你，先生，帮了我很多忙，我亲自钓到了：

var-cors=require（“cors”）；app.use（cors（））app.use（函数（req，res，next）{res.header（“访问控制允许源代码”，“*”）；res.header（“访问控制允许源代码”，“源代码，X-request-With，内容类型，Accept”）；next（）；}）
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept"
  );
  next();
});