'No Access-Control-Allow-Origin header' 从 Deezer 获取数据时出错 Api

Question

我正在创建一个从 Deezer Api

获取数据的 React 应用程序

目前，我正在尝试获取热门专辑 https://api.deezer.com/chart/0/tracks :

我创建了一个请求数据的函数

fetchTopAlbums = () => {
    return fetch('https://api.deezer.com/chart/0/tracks', { 'Accept': 'application/json', })
      .then((res) => res.json())
  }

调用此函数时，我在控制台中收到此错误

Access to fetch at 'https://api.deezer.com/chart/0/tracks' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Error Image can be accessed here

Answer 1

deezer api 正在限制从网站发出的 API 呼叫。它这样做是为了专门阻止您尝试执行的操作。一般来说，CORS 的目的是阻止意外网站访问其他网站后端。一些服务允许任何站点访问它们，而另一些服务则要求您通过您和相关 API 之间的后端访问该服务。

'No Access-Control-Allow-Origin header' 从 Deezer 获取数据时出错 Api

'No Access-Control-Allow-Origin header' Error when fetching data from Deezer Api

javascript

reactjs

api

fetch

restful-authentication