Мой запрос к конечной точке: http://localhost:3200/api/posts/ возвращает массив объектов, используя POSTMAN, эти объекты имеют значения title, description и image.

введите описание изображения здесь

на моем внешнем интерфейсе я создал компонент, который пытается извлечь эти значения с помощью axios и useEffect from реагировать, а затем отобразить их.

 const Posts = () ={amp}gt; { let [posts, setPosts] = useState([]) console.log(posts) useEffect(() ={amp}gt; { axios.get("http://localhost:3200/api/posts/") .then(({ data })={amp}gt; { console.log('data====',data); setPosts( data ); }) .catch(err ={amp}gt; { console.log(err); }) }, []); return ( {amp}lt;ul{amp}gt; {posts.map((item, index) ={amp}gt; {amp}lt;li key={index}{amp}gt;{item.title}{amp}lt;/li{amp}gt;)} {amp}lt;/ul{amp}gt; ); } 

Я отображаю компонент «Сообщения» под формой, где я получаю данные, заголовок отображается, но компонент не загружает данные. ! [введите описание изображения здесь

 return ( {amp}lt;{amp}gt; {amp}lt;form onSubmit={submitFormHandle}{amp}gt; {amp}lt;div className="form-group"{amp}gt; {amp}lt;ToastContainer /{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;label htmlFor="formGroupExampleInput"{amp}gt;Title{amp}lt;/label{amp}gt; {amp}lt;input type="text" className="form-control" id="formGroupExampleInput" placeholder="Example input" onChange={onChangeTitle}/{amp}gt; {amp}lt;div className="form-group"{amp}gt; {amp}lt;label htmlFor="comment"{amp}gt;description{amp}lt;/label{amp}gt; {amp}lt;textarea className="form-control" rows="5" id="comment" onChange={onChangeDescription}{amp}gt;{amp}lt;/textarea{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div className="form-group files"{amp}gt; {amp}lt;label htmlFor="exampleFormControlFile1"{amp}gt;Upload Cat Memes{amp}lt;/label{amp}gt; {amp}lt;input type="file" className="form-control" id="exampleFormControlFile1" multiple onChange={onChangeFile} /{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;button type="submit" className="btn btn-primary"{amp}gt; Submit {amp}lt;/button{amp}gt; {amp}lt;/form{amp}gt; {amp}lt;h3{amp}gt;View your posts{amp}lt;/h3{amp}gt; {amp}lt;Posts /{amp}gt; {amp}lt;/{amp}gt; ); }; 

Я получаю эту ошибку:

Ошибка: ошибка сети при createError (createError.js: 17) в XMLHttpRequest.handleError (xhr.js: 80)

jcx3x

новый участник этого сайта. Будьте внимательны, спрашивая разъяснения, комментируя и отвечая. Проверьте наш

Правила поведения

,

Разрешить 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(); });