Monday 14 December 2020

React and Redux: 401 Unauthorized Error POST API Request

//Postmanenter image description here //React Appenter image description hereenter image description here 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['x-authorization'] = token;
  }
  return config;
};


from React and Redux: 401 Unauthorized Error POST API Request

No comments:

Post a Comment