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

I'm creating a React application that fetches data from Deezer Api

Currently, I'm trying to get top albums https://api.deezer.com/chart/0/tracks :

I created a function that requests the data

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

On calling this function I get this error in the console

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.

The deezer api is restricting API calls made from websites. It does this to specifically block what you are trying to do. In general this is the purpose of CORS to stop unexpected websites from accessing other websites backends. Some services allow any site to access them other ones require you to access that service via a backend between your side and the API in question.