fetch patch request is not allowed

Question

I have two apps one is a react front end and the second one is the rails-api app.

I have been happily using isomorphic-fetch till I needed to send PATCH method to th

Answer 1

use this code _method: 'PATCH'

return (
        fetch(API_ROOT + route, {
            _method: 'PATCH',
            crossDomain: true,
            xhrFields: {
                withCredentials: true
            },
            headers: {
                Accept: 'application/json',
                'Content-Type': 'application/json',
                'Authorization': ''
            },
            data: JSON.stringify(data),
            credentials: 'include'
        })
        .then(res => res.json())
        .then(res => {
            return res
        })
        .catch(err => console.error(err))
    );

Another Way is insert method in headers

headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
            '_method': 'PATCH',
            'Authorization': ''
        }

it helps you

return (
        fetch(API_ROOT + route, {
            method: 'POST',
            crossDomain: true,
            xhrFields: {
                withCredentials: true
            },
            headers: {
                Accept: 'application/json',
                'Content-Type': 'application/json',
                '_method': 'PATCH',
                'Authorization': ''
            },
            data: JSON.stringify(data)
        })
        .then(res => res.json())
        .then(res => {
            console.log(res);
            return res
        })
        .catch(err => console.error(err))
    );

Answer 2

I had this error while PATCH was all caps. I was also getting this error with DELETE and PUT too. I checked the headers of my fetch and I saw a OPTIONS method. I was using the isomorphic-fetch lib here - https://www.npmjs.com/package/isomorphic-fetch

The fix for me was to add to my PHP page:

<?php
    header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, PATCH');

Without this, in Firefox 53 I would keep getting the javascript error:

NetworkError when attempting to fetch resource.

The fetch I was doing was this:

try {
    await fetch('https://my.site.com/', {
        method: 'PATCH',
        headers: { 'Content-Type':'application/x-www-form-urlencoded' },
        body: 'id=12&day=1'
    });
} catch(ex) {
    console.error('ex:', ex);
}

Answer 3

I had a very similar problem with reactJS front end and rails API using Rack::Cors, and adding patch to the list of allowed methods solved the problem for me.

config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins '*'
    resource '*', headers: :any, methods: [:get, :post, :patch, :options]
  end
end