In my app, I am getting a preflight error on the second AJAX call when making the following two-step call:
$.ajax({
type:'POST',
url:'https://podio.com/oauth/token',
data: {
'grant_type': 'app',
'app_id': '#####',
'app_token': '#####',
'client_id': '#####',
'redirect_uri': '#####',
'client_secret': '#####'
}
}).done(function(response){
$.ajax({
type:'PUT',
contentType: "application/json",
headers: {'Authorization': 'OAuth2 ' + response.access_token},
url:'https://api.podio.com/item/1/value/142784383',
data: JSON.stringify({"values": "doofus@test.com"})
}).done(function(response){
console.log(response)
}).fail(function(error){
console.log(error)
})
})
The error in Chrome (with the CORS Toggle browser extension on) is as follows:
jquery.min.js:4 OPTIONS https://api.podio.com/item/1 400 () test.html:1 XMLHttpRequest cannot load https://api.podio.com/item/1/value/142784383. Response for preflight has invalid HTTP status code 400
and Safari logs
Failed to load resource: the server responded with a status of 403 (HTTP/2.0 403)
referring to https://api.podio.com/item/1/value/142784383
Although I've used AJAX calls like this plenty of times for my own apps, I'm a little unfamiliar with some of the nuances of engaging with external APIs. Any insight into the causes and solutions to this problem would be much appreciated.
I see you define the content type to be application/json. The thing with that is that when the content type is anything other than the simple text/html (and a couple of others) the browser sends an OPTIONS request to make sure the server is expecting the content type.
The server then has to send a couple of headers. You might be familiar with access-control-allow-origin: * but the server also needs to tell the browser what header fields it's willing to accept. For that the server needs to send a
Access-Control-Request-Headers: Content-Type
This tells the browser that the client can send a content type header in the actual request. So you need to make sure that the server is not only accepting and returning 200 on an OPTIONS request but also sending the two headers mentioned above.
In reply to your comment, you dont need to do anything on the client. The server needs to send those headers.