CORS Preflight Response Error

Question

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!

That means the site you're trying to access is not configured to allow it. — Pointy, Mar 11 '17 at 15:05
The preflight request is done before sending the final request for checking CORS validity. Check this answer: http://stackoverflow.com/questions/8685678/cors-how-do-preflight-an-httprequest — jsertx, Mar 11 '17 at 15:13

score 4 · Answer 1 · edited Mar 11 '17 at 21:33

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.

CORS Preflight Response Error

1 Answers1