使用 React 和 axios 调用 Deezer API 失败答案

【问题标题】：Failed call to Deezer API with React and axios使用 React 和 axios 调用 Deezer API 失败
【发布时间】：2019-03-29 20:43:32
【问题描述】：

我想连接到 Deezer API 并读取数据，the API is available here，如果您使用 first links 他们在那里并在新选项卡中打开您将看到 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);

【问题讨论】：

Deezer Javascript SDK 怎么样？任何人都可以在 React 应用中很好地实现这一点

标签： reactjs axios

【解决方案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

但是，我建议您编写自己的后端代码，您将在其中调用 Deezer 的 API。那里不会出现跨域错误。

【讨论】：