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

Question

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.

Error Image can be accessed here

why don't you do your research on what cors is. – Darkrum Jun 21 '20 at 15:54 — Darkrum, Jun 21 '20 at 15:54
you need to add cors to your server – Ilan Frumer Jun 21 '20 at 15:54 — Ilan Frumer, Jun 21 '20 at 15:54

score 0 · Accepted Answer · answered Jun 24 '20 at 16:24

0

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.

answered Jun 24 '20 at 16:24

Warren Parad

3,910
1
20
29

Okay I believe I understand that quite better now. Thank you – Daniel Soladoye Jun 24 '20 at 19:35

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

1 Answers1