javascript - Redux Toolkit RTK-Query Cors issue - Stack Overflow

admin管理员组

文章数量:1221922

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

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: '/', 
    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 '' 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 !

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 !

• javascript
• reactjs
• redux
• redux-toolkit
• rtk-query

Share Improve this question Follow edited May 28, 2022 at 9:01 Dimitri Enjelvin asked May 28, 2022 at 6:16 Dimitri EnjelvinDimitri Enjelvin 10511 gold badge22 silver badges77 bronze badges

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 6

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);
};

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.

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.

本文标签： javascriptRedux Toolkit RTKQuery Cors issueStack Overflow