I am trying to use Ajax to request information from an API. When attempting to run the code below, I receive this error:
XMLHttpRequest cannot load. Request header field cache-control is not allowed by Access-Control-Allow-Headers in preflight response.
Here's the code:
var Onion = {
"async": true,
"crossDomain": true,
"url": "https://webhose.io/search?token=fc70c82d-7bd6-4bed-aafe-4d4e65c7e5db&format=json&q=&site=theonion.com&size=12",
"dataType": "json",
"method": "GET",
"headers": {
"cache-control": "no-cache",
"postman-token": "9a49be98-19cb-ebc6-9f52-4be90c88222b",
"Access-Control-Allow-Headers": true,
}
}
$.ajax(Onion).done(function (response) {
console.log(response);
console.log(response.posts[0].title);
I'm a beginning coder and I believe I need to add something to the header. Any suggestions?
Thanks in advance for your help!
You're sending this 3 HTTP headers in your request:
"cache-control": "no-cache"
"postman-token": "9a49be98-19cb-ebc6-9f52-4be90c88222b"
"Access-Control-Allow-Headers": true
Browser is throwing this error:
XMLHttpRequest cannot load https://webhose.io/search?token=fc70c82d-7bd6-4bed-aafe-4d4e65c7e5db&format=json&q=&site=theonion.com&size=12&_=1489245026633. Request header field postman-token is not allowed by Access-Control-Allow-Headers in preflight response.
And in the HTTP response, remote server is sending you this header:
Access-Control-Allow-Headers:accept, origin, Content-type, x-json, x-prototype-version, x-requested-with, authorization
This means that neither cache-control, nor postman-token, nor Access-Control-Allow-Headers HTTP headers are allowed in the HTTP request, only accept, origin, Content-type, x-json, x-prototype-version, x-requested-with, authorization are allowed.