1

I'm trying to get data from the public Deezer Api located here : https://api.deezer.com/.

To fetch that data i'm using RTK-Query from reduxtoolkit like so (to then use it in my components using hooks i get from each endpoints) :

export const deezerApi = createApi({
    reducerPath: 'deezerApi',
    baseQuery: fetchBaseQuery({ baseUrl: 'https://api.deezer.com/', 
    mode: "cors", ==> enable cors here
    prepareHeaders: (headers) => {
      headers.set('Access-Control-Allow-Origin', '*') ==> what i tried but still not working
      // headers.set('Access-Control-Allow-Methods', 'GET') //
      // headers.set('Access-Control-Allow-Headers', '*') //
      return headers
    },
  }),
    
    endpoints: (builder) => ({

      
      getChartArtists: builder.query({
        query: () => `chart/artists`,
      }),

// More endpoints 

    }),
    
  })

Here is the error i get :

Access to fetch at 'https://api.deezer.com/chart/albums' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: 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

I get this error whether or not i add this line of code :

headers.set('Access-Control-Allow-Origin', '*')

When i look at the network console, it seems to be added to the header of my request...

enter image description here

Does anyone what's happening or have a solution ?

Thanks for your help !

Dimitri Enjelvin
  • 45
  • 1
  • 6

1 Answers1

0

CORS headers are response headers, not request header. That means the server has to set them when responding, not the client when asking for a resource. Or: you cannot set them. CORS is a method where the server controls who is allowed to talk to it.

What you can do is enable CORS in the first place. Add mode: "cors" to your fetchBaseQuery arguments.

phry
  • 18,593
  • 2
  • 24
  • 44
  • Thanks for your answer ! I tried to enable cors like edited in my question but it doesn't seems to work, i still get the same error – Dimitri Enjelvin May 28 '22 at 08:59
  • It's very possible that deezer is just not allowing other webpages to access their api. In that case you can't directly access their api and there is no way around that without a third party playing proxy server-side. This answer seems to suggest something like that: https://stackoverflow.com/a/45486594/2075944 – phry May 28 '22 at 10:16
  • Deezer themselves kinda imply this: https://support.deezer.com/hc/en-gb/articles/360011538897-Deezer-FAQs-for-developers "My authentication token request is blocked because of CORS. Why?" "It appears you are trying to make a call via Javascript on another domain. If you’d like our API in a JavaScript implementation, please use our Javascript SDK." – phry May 28 '22 at 10:17