Не удалось вызвать Deezer API с помощью React и axios

Question

Я хочу подключиться к Deezer API и прочитать данные, API доступен здесь , если вы возьмете первые ссылки , они есть и откроются в новой вкладке, вы увидитеданные в формате json, однако Axios не может их вернуть

import React from "react";
import ReactDOM from "react-dom";

import axios from "axios";

import "./styles.css";

class App extends React.Component {

  componentDidMount() {
    axios.get("https://api.deezer.com/album/302127")
    .then(response => {
      console.log(response);
    })
    .catch(err => {
      console.log(err);
    });
  }

  render() {
    return (
      <div className="App">
        <h2>Deezer</h2>
      </div>
    );
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

Deezer api не разрешает перекрестный запрос.Поэтому вызов API из браузера невозможен.

Однако вы можете использовать обходной путь и использовать https://cors -anywhere.herokuapp.com

Вам необходимо изменить свойкод, подобный следующему:

axios.get("https://cors-anywhere.herokuapp.com/https://api.deezer.com/album/302127")
  .then(response => {
    this.setState({ response })
  })
  .catch(err => {
    console.log('error', err);
  });

Вот рабочий пример: https://stackblitz.com/edit/react-v6bufu

Однако я рекомендую написать свой собственный бэкэнд, где вы будете вызывать API-интерфейсы Deezer.Вы не будете получать ошибку перекрестного происхождения.