React and Redux: 401 Unauthorized Error POST API Request

Question

//Postman //React App For my react app, when dispatching apiPostRequest() I am getting 401 unauthorized error when it hits API POST Request Middleware even though the user is authenticated and token is stored in local storage. The confusing part is that my GET and DELETE api requests work just fine. So I cannot figure out why then is POST api returning 401 unauthorized error? It works fine in Postman. Any help will be greatly appreciated.

//Accept request action

export const acceptRequest = (requestId) => ({
  type   : ACCEPT_REQUEST,
  payload: requestId
});

// Accept request middleware

export const acceptRequestFlow = ({dispatch, getState}) => next => action => {
  next(action);

    if(action.type === ACCEPT_REQUEST){
      const acceptRequestId = action.payload
      console.log(acceptRequestId)
      const URL = `/api/userConnections/acceptRequest/${action.payload}`;
      dispatch(apiPostRequest(URL, setAuthorizationHeader(getState), acceptRequestId, ACCEPT_REQUEST_SUCCESS, ACCEPT_REQUEST_ERROR));
    }
};

//API POST, DELETE, GET request actions

export const apiPostRequest = (url, config, body, onSuccess, onError) => ({
  type: POST_API_REQUEST,
  meta: {url, config, body, onSuccess, onError}
});
export const apiDeleteRequest = (url, config, id, onSuccess, onError) => ({
  type: DELETE_API_REQUEST,
  meta: {url, config, id, onSuccess, onError}
});
export const apiGetRequest = (url, config, onSuccess, onError) => ({
  type: GET_API_REQUEST,
  meta: {url, config, onSuccess, onError}
});

//API POST, DELETE, GET request middleware

export const api = ({dispatch}) => next => action => {

  if(action.type === POST_API_REQUEST) {
    const {url, config, body, onSuccess, onError} = action.meta;

    axios.post(url, config)
      .then((data) => {dispatch({ type: onSuccess, payload: body})})
      .catch(error => dispatch({ type: onError, payload: error }))
  }

  if(action.type === GET_API_REQUEST) {
    const {url, config, onSuccess, onError } = action.meta;

    axios.get(url, config)
      .then((data) => {dispatch({ type: onSuccess, payload: data})})
      .catch(error => dispatch({ type: onError, payload: error }))
  }

  if(action.type === DELETE_API_REQUEST) {

    const {url, config, id, onSuccess, onError } = action.meta;
    axios.delete(url, config)
      .then((data) => { dispatch({ type: onSuccess, payload: id })})
      .catch(error => dispatch({ type: onError, payload: error }))
  }


return next(action)
};

//Setting Auth Header

export const setAuthorizationHeader = (getState) =>{

    const token = getState().auth.token; 
    const config = {
      headers:{
        "Content-Type": "application/json"
      }
    }
  if(token){
    config.headers['Authorization'] = token;
  }
  return config;
};

Answer 1

The issue is that you are using the post method incorrectly.

As you can see from the image taken from axios doc, when making a post without specifying the parameter name, then the second parameter passed in is perceived as data.

So try: axios.post(url, {}, config)