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