Method PATCH is not allowed by Access-Control-Allow-Methods in preflight response

Question

I am using axios PATCH method in ReactJS to update the record but its getting failed with following error

Failed to load http://192.168.99.100:8080/adslots/883: Method PATCH is not allowed by Access-Control-Allow-Methods in preflight response.

Here is my action:

export const UPDATE_AD_SLOTS_REQUEST = 'UPDATE_AD_SLOTS_REQUEST';
export const UPDATE_AD_SLOTS_SUCCESS = 'UPDATE_AD_SLOTS_SUCCESS';
export const UPDATE_AD_SLOTS_ERROR = 'UPDATE_AD_SLOTS_ERROR';


export function updateAdslotsRequest(){
  return {
    type: UPDATE_AD_SLOTS_REQUEST
  }
}

export function updateAdslotsSuccess(data){
  return {
    type: UPDATE_AD_SLOTS_SUCCESS,
    data: data
  }
}

export function updateAdslotsError(errors){
  return {
    type: UPDATE_AD_SLOTS_ERROR,
    erros: errors
  }
}

export function updateAdslots(data, id) {
  return dispatch => {
    dispatch(updateAdslotsRequest());
    return axios.patch(`http://192.168.99.100:8080/adslots/${id}`, data)
      .then(res => {
        dispatch(updateAdslotsSuccess(res.data));      
      })
      .catch(errors => {
        dispatch(updateAdslotsError(errors));
      })
  }
}

I am totally confused.

Answer 1

The api you are making the call to has to allow PATCH requests. They can do this by setting the Access-Control-Allow-Methods header to also have Patch in it. Look up how to do this with whatever server side language your api is using. You could also maybe try switching your call to a POST request but that is more of a temporary fix.