Redux Toolkit RTK-Query Cors issue

Question

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...

Does anyone what's happening or have a solution ?

Thanks for your help !

score 4 · Answer 1 · answered Jan 15 '23 at 07:13

If you are certain that your backend has enabled CORS to all domains in dev mode, you might need to adjust your fetchBaseQuery credential like this:

import { fetchBaseQuery } from "@reduxjs/toolkit/query";
import type { BaseQueryFn, FetchArgs, FetchBaseQueryError } from "@reduxjs/toolkit/query";
import { API } from "../common/const";

const baseQuery = fetchBaseQuery({
    baseUrl: API.BASE_URL,
    // crendentials: "include" will face CORS if credential is not provided
    credentials: "same-origin", 
    prepareHeaders: (headers) => {
        const accessToken = localStorage.getItem("token");
        if (accessToken) {
            headers.set("authorization", `Bearer ${accessToken}`);
            headers.set("Content-Type", "application/json");
        }

        return headers;
    },
});

export const baseQueryWithReauth: BaseQueryFn<string | FetchArgs, unknown, FetchBaseQueryError> = async (
    args,
    api,
    extraOptions
) => {
    return await baseQuery(args, api, extraOptions);
};

This solved the error, wow you saved me, been stuck for 2 days on this. cheers — TrevorDeTutor, Mar 27 '23 at 19:25

score 1 · Answer 2 · answered May 28 '22 at 07:17

1

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.

answered May 28 '22 at 07:17

phry

35,762
5
67
81

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

score 0 · Answer 3 · answered Jun 19 '23 at 07:42

0

After losing a whole day on this I was able to get it to work by changing method: 'patch' to method: 'PATCH'.

I hope this helps somebody.

answered Jun 19 '23 at 07:42

Beikeni

832
7
17

Redux Toolkit RTK-Query Cors issue

3 Answers3