fetch patch request is not allowed
JavascriptPhpRuby on-RailsFetch ApiJavascript Problem Overview
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.
Javascript Solutions
Solution 1 - Javascript
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
Solution 2 - Javascript
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);
}
Solution 3 - Javascript
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))
);