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 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

Answer 1

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