React API Fetch fail

Question

Я пытаюсь создать сайт, на котором я буду использовать веб-API и отображать «пользователей» на сайте.У меня есть API-ключ, который я должен вставить в заголовок как «x-api-key».

На данный момент это мой код:

import React, { Component } from 'react';
import './App.css';

class App extends Component {

constructor(props) {
  super(props);
  this.state = {
    isLoaded: false,
    items: []
  }
}

componentDidMount() {


  const myHeaders = new Headers();

  myHeaders.append('x-api-key', 'KEY_HERE');
  myHeaders.append('Content-Type', 'application/x-www-form-urlencoded');
  myHeaders.append('cache-control', 'no-cache')

  fetch('URL_HERE', {
    method: 'GET',
    headers: myHeaders,
    async: true,
  })
  .then(res => res.json())
  .then(json => {
    this.setState({
      isLoaded: true,
      items: json,
    })
  });
}

  render() {
  var{isLoaded, items} = this.state;
  if(!isLoaded) {
    return <div>Loading...</div>;
  }

  else{
   return (
     <div className="App">
       <ul>
         {items.map(item => (
           <li key={item.id}>
             Name: {item.name} | Id:{item.id}
           </li>
         ))};
       </ul>
     </div>
   );
  }
}

}

экспорт приложения по умолчанию;

Проблема в том, что я получаю следующие сообщения об ошибках в консоли:

Не удалось загрузить http://URL/users: Ответ на предпечатную проверку не имеет HTTPок статус.

Uncaught (в обещании) TypeError: Не удалось получить

Когда я попытался сделать вызов GET в Почтальоне, мне это удалось.Поэтому я полагаю, что проблема заключается в том, что API-ключ не реализован в заголовке должным образом.

Оцените помощь, пожалуйста, дайте мне знать, если есть что-то еще, что вам нужно знать!

Answer 1

Вам нужно удалить строку ниже из вашего кода, и после этого вам нужно обработать метод OPTIONS со стороны сервера.

myHeaders.append('cache-control', 'no-cache')

Вы получаете эту ошибку, потому что добавляете заголовок с 'x-api-ключ».Вы сделали запрос сложным.Для этого браузер должен выполнить предварительный запрос OPTIONS, чтобы запросить разрешение на отправку сложного запроса.

Сервер, к которому вы отправляете запрос, отвечает, что запросы OPTIONS не разрешены для этого URL

Вам нужно будет изменить сервер и правильно обработать метод OPTION, чтобы он соответствующим образом реагировал напредварительный запрос CORS.

Вы не получаете эту ошибку в почтальоне, потому что почтальону не нужно делать предполетный запрос.

Answer 2

Попробуйте использовать axios, если вы хотите получать данные с помощью API.Его можно использовать как на стороне клиента, так и на стороне сервера, а также очень просто.Вот репозиторий GitHub для вашего гида.https://github.com/axios/axios