fetch patch request is not allowed

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 the server.

I am getting:

Fetch API cannot load http://localhost:3000/api/v1/tasks. Method patch is not allowed by Access-Control-Allow-Methods in preflight response.

but the OPTIONS response from the server includes a PATCH method in a list of Access-Control-Allow-Methods:

This is how the fetch is implemented:

const API_URL = 'http://localhost:3000/'                                            
const API_PATH = 'api/v1/'

fetch(API_URL + API_PATH + 'tasks', {
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  },
  method: 'patch',                                                              
  body: JSON.stringify( { task: task } )                                        
})

POST, GET, DELETE are set up pretty much the same and they are working fine.

Any idea what is going on here?

UPDATE:

Method patch is case sensitive:

https://github.com/github/fetch/blob/master/fetch.js#L200

Not to sure if this is intended or a bug.

UPDATE 2

This is intended and the method type PATCH needs to be case sensitive. Updating the line from fetch method to:

method: 'PATCH'

fixes the problem.

https://github.com/github/fetch/issues/254

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

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);
}