Как получить и отобразить данные из Express API в приложении React?

Question

Я недавно начал учиться реагировать. Я пытаюсь создать приложение, использующее API, созданный мной с использованием Express.

. В настоящее время я размещаю свой Express API локально на * 1003. *http://localhost: 3000 / api

Однако, когда я открываю почтальон или мой браузер и отправляю запрос GET на http://localhost: 3000 / api / tasks , я получаю все задачи, которые находятся в моем API, как и ожидалось.

Мое приложение реагирования выглядит следующим образом

class App extends React.Component{
  constructor(){
    super()
    this.state = {
      tasks: {}
    }
  }
...
  componentDidMount() {
     this.setState({loading: true})
     fetch("http://localhost:3000/api/tasks/1")
       .then(response => response.json())
       .then(data => {
         this.setState({
           tasks: data
         })
       })
   }
...
  render() {
    return(
      <div>
        <p>{this.state.tasks.id}</p>
      </div>
  }
}

Когда я открываю вкладку dev в своем браузере, я вижу, что запрос (код: 304), и есть ответ, который является json файлом с нужным мне объектом. Тем не менее мне не удается отобразить данные, которые я получаю из API.

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, Authorization");
    res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
    next();
});

в мой индекс. js файл API Express Мне удалось получить и отобразить данные из API в приложение реагирования.

Answer 2

Я могу дать вам мой пример кода, поскольку в вашем коде трудно увидеть ошибку без отладки.

Я использую Nextjs, и вот как я получаю данные со стороны сервера, используя fetch Метод.

const SamplePage = props => {
    // you can get data from api here from props.data

    const [ testState, setTestState] = useState({
        test: props.data,
    });


    return (
        ...
    )
}

SamplePage.getInitialProps = async ctx => {
    try {
        const { token, username } = nextCookie(ctx);
        const apiUrl = getHost(ctx.req) + `/api/portfolio/${ctx.query.id}`;
        const response = await fetch(apiUrl, {
            method: 'GET',
            headers: {
                Authorization: JSON.stringify({ token, username })
            }
        });

        if (response.ok) {
            const data = await response.json();
            return { data };
        } else {
            // add your action when response is not ok
        }
    } catch (error) {
        // add your action when have error
    }
};

export default withAuthSync(SamplePage);