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.

Iene

Answer 1

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!

Lithography

It's worked for me, – Handgun

You helped me a lot with your solution! Thanks! – Daleth

you're welcome :') @Daleth – Lithography

For worktop users, just do: ``` import { Router, compose } from 'worktop'; import { preflight } from 'worktop/cors'; const router = new Router(); router.prepare = compose(preflight()); ``` – Mattos

it's not working for me :'( – Marsden

Answer 2

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.

Aglow

I have this and it doesn't work for me and can't find anything which solves my problem... I'm opening a new question since this one seems to be abandoned – Haletta

Answer 3

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?

Blithering

Answer 4

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 !

Hardison

Answer 5

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.

Dialectics

Answer 6

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

Portend