Не удается получить данные с сервера Express для реакции - PullRequest
Новая
       6

Не удается получить данные с сервера Express для реакции

0 голосов
/ 27 марта 2020

Я пытаюсь получить данные с сервера для отображения некоторых статей. В то время как Почтальон возвращает массив объектов и http://localhost: 5000 / article отображает его очень хорошо, когда я выбираю React, на экране ничего не отображается и ошибок нет. Есть фрагмент с сервера. js 

const express=require('express');
const bodyParser=require('body-parser');
const cookieParser=require('cookie-parser')
const cors=require('cors');
const app=express();

const db=require('./db');
const articleController=require('./controllers/article-controller');
const userController=require('./controllers/user-controller');
const postController=require('./controllers/post-controller');

app.use(cors());
app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());
app.use(cookieParser())

db.on('error', console.error.bind(console, 'MongoDB connection error'))

//get /articles
app.get('/articles',articleController.get)

app.use('/',userController)

app.listen(5000, ()=>
    console.log('Server started on port 5000')
);

Вот файл ArticleService. js с клиента 

export default {
getArticles: ()=>{
     return fetch('http://localhost:5000/articles')
        .then((response, error)=>{
            if(response.status !== 401){
                console.log(response)
                return response.json().then(data => data)
            }
            else{
                console.log(error)
                return {message:{msgBody:"Error"}}
            }
        })
}}

И компонент Article.jsx: 

import React, {useState, useContext, useEffect} from 'react'
import {Navbar, Footer} from '../components'
import ArticleService from '../Services/ArticleService'
import {AuthContext} from '../Context/AuthContext'

const Articles=props=>{
//const [article, setArticle]=useState({title:"", content:""})
const [articles, setArticles]=useState([])
const authContext =useContext(AuthContext)

useEffect(()=>{
    ArticleService.getArticles()
        .then(data=>{
            setArticles(data.articles)
        })
},[])

return(
    <div>
        <header>
            <h1>Articles</h1>
        </header>
        <section>
        <ul className="list-group">
            {
                articles && articles.map(article => {
                return(
                    <li key={article._id} article={article}>
                    <h1>{article.title}</h1>
                    <p>{article.content}</p>
                    </li> 
                )
                })
            }
        </ul>
        </section>
    </div>
)
}

export default Articles

Я также не получаю никаких ошибок в консоли. Просто ответ с типом: "cors", status: 200 и ok: true

1 Ответ

0 голосов
/ 27 марта 2020

Добавьте промежуточное программное обеспечение CORS и настройте сервер приложений браузера или разрешите все

https://expressjs.com/en/resources/middleware/cors.html

Подробнее о CORS, проверьте это

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

...