CODEWITHSUNDEEP
reactjsreduxredux-thunkredux-toolkit
bluedevil2k
bluedevil2k

Reputation: 9511

Redux Toolkit - GET is never called, OPTIONS never returns

I'm converting my app to use the new React Redux Toolkit, but am running into an issue when I try to call a GET function. The OPTIONS call is initiated but the GET never is called. I can't think of any reason why the thunk would partially run. The structure of the code has been working using an older Redux setup, so essentially the only thing I've changed to go from working to not working is using the Toolkit, specifically the createAsyncThunk().

In my Login page component's mapDispatchToProps...

 fetchProfile: email => dispatch(fetchProfileAction({id:email})),

Setting up my asyncThunk...

export const fetchProfileAction = createAsyncThunk(
  'profile/fetchProfile',
  async (params, thunkAPI) => {
    const response = await api.userApi.fetchProfile(params);
    return response.data;
  }
);

The API call...

fetchProfile: (params) => axios.get(authEndpointUrl(`users/${params.id}`)).then(response => response.data),

And the log statements. The OPTIONS has no Headers or Cookies... enter image description here

Upvotes: 1

Views: 444

Answers (1)

Deykun
Deykun

Reputation: 1268

You most likely try to fetch something from another domain while breaking CORS policy. Check your browser's console, you probably find a warning there about broken CORS policy, if so you should contact an administrator of the API and ask him to fix its headers (it is a backend issue).

Axios is calling OPTIONS to check what methods are available for given URL, at this point OPTIONS header is blocked by CORS or they return information that GET / POST is not available, so axios does not even try to call an endpoint.

Upvotes: 2

Related Questions