Question

我对端点的请求：http://localhost:3200/api/posts/使用POSTMAN返回对象数组，这些对象具有标题，描述和图像的值。

在前端，我制作了一个组件，尝试使用axios和来自react的useEffect提取这些值，然后进行渲染。

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>
  );




}

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

return (
    <>
    <form onSubmit={submitFormHandle}>
          <div className="form-group">
             <ToastContainer />
      </div>

     <label htmlFor="formGroupExampleInput">Title</label>
     <input type="text" className="form-control" id="formGroupExampleInput" placeholder="Example input" onChange={onChangeTitle}/>


    <div className="form-group">
      <label htmlFor="comment">description</label>
      <textarea className="form-control" rows="5" id="comment" onChange={onChangeDescription}></textarea>
          </div>

          <div className="form-group files">

        <label htmlFor="exampleFormControlFile1">Upload Cat Memes</label>
        <input
          type="file"
          className="form-control"
          id="exampleFormControlFile1"
          multiple
          onChange={onChangeFile}
        />
          </div>

        <button type="submit" className="btn btn-primary">
            Submit
        </button>

    </form>

      <h3>View your posts</h3>
      <Posts />
  </>
  );
};

我收到此错误：

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

Answer 1

允许在您的后端使用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();
});

数据未使用axios呈现，/使用mongoDB

1 个答案: