CODEWITHSUNDEEP
javascriptreactjsreduxreact-reduxaxios
Hemadri Dasari
Hemadri Dasari

Reputation: 34004

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

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.

Upvotes: 8

Views: 27348

Answers (7)

Saber Aissaoui
Saber Aissaoui

Reputation: 1

try to write patch in uppercase 'PATCH' it worked for me

Upvotes: 0

Amit V
Amit V

Reputation: 11

I also encountered the same error while making the patch request. I tried everything from configuring CORS on server side to add patch in allowed methods. But none of the solutions work. Finally I replaced it with PUT request and it worked fine.

Upvotes: 1

Luk
Luk

Reputation: 1

workaround : use browserplugin CORS (chrome) when cors is activated you can open cors options and add localhost:3000 to the whitelist. Then this thing is working for me

Upvotes: -1

Param Mittal
Param Mittal

Reputation: 99

You can use any cors extension/plugin to make it work in browsers. Also, make sure u have configured extension settings sometimes PATCH requests are not listed down in extension settings

Happy to help !

Upvotes: 1

Rafia Zafar
Rafia Zafar

Reputation: 412

Try this solution:

  1. Go to your app.js file where you've defined all the middleware.

  2. Open terminal and type command "npm install cors", and hit enter.

  3. Now write the following code in your file:

    const cors = require("cors");

const app = express();

app.use(cors());

Hopefully, It will do the trick!

Upvotes: 6

C. Johnson
C. Johnson

Reputation: 219

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.

Upvotes: 5

mradziwon
mradziwon

Reputation: 1236

I think it is problem related to CORS settings on your backend. You have to allow PATCH requests in CORS settings. What kind of backend server are you using?

Upvotes: 4

Related Questions