Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

3.5K
Views
Redux Toolkit RTK-Query Cors issue

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 !

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

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.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!