title: Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers
body: <p>I am trying to make a AJAX POST call to an API using Javascript. Its giving me this error</p>
  
  <pre><code>    OPTIONS https://ethor-prod.apigee.net/v1/stores/HI6PIDO5JS/orders/calculate?apikey=wSgbv9PE8aJhDOI17vvTUX1NlAceUXG7 
  Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers. store.js:581
      calculateorder store.js:581
      onclick index-3.html:183
      XMLHttpRequest cannot load https://ethor-prod.apigee.net/v1/stores/HI6PIDO5JS/orders/calculate?apikey=wSgbv9PE8aJhDOI17vvTUX1NlAceUXG7. 
  Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers. index-3.html:1
  </code></pre>
  
  <p>Below is the code thats causing this error</p>
  
  <pre><code>var xmlhttp;
      xmlhttp = new XMLHttpRequest();
  
      xmlhttp.onreadystatechange = function () {
          if (xmlhttp.readyState == 4 &amp;&amp; xmlhttp.status == 200) {
              alert(xmlhttp.responseText);
              alert("success");
          }
      }
  
      xmlhttp.open("POST", url, true);
      xmlhttp.setRequestHeader("Content-Type", "application/json");
      xmlhttp.setRequestHeader("Access-Control-Allow-Origin", "*");
      xmlhttp.setRequestHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
      xmlhttp.setRequestHeader("Access-Control-Allow-Methods","POST, GET, OPTIONS, DELETE, PUT, HEAD");
      xmlhttp.setRequestHeader("Access-Control-Max-Age","1728000");   
      xmlhttp.send(JSON.stringify(calculate));
  </code></pre>
  
  <p>the url and variable calculate are totally fine. The conversion into JSON is perfect too. I tried the converted JSON with an HTTP client (RESTED). It worked perfectly, so the error is in the POST call, most probably related to headers and Cross origin resource sharing (CORS). </p>
  
  <p>When I use the HTTP Client, this is the response header I am getting along with successful execution</p>
  
  <pre><code>HTTP/1.1 200 OK
  
  Content-Type: application/json;charset=UTF-8
  Access-Control-Allow-Origin: *
  Set-Cookie: JSESSIONID=DC0DBDB6B877BD1CD67BBE4E20432BFD; Path=/v1.0/; HttpOnly
  Server: nginx/1.4.5
  Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE, PUT, HEAD
  Transfer-Encoding: Identity
  Access-Control-Max-Age: 1728000
  Access-Control-Allow-Headers: x-requested-with
  Expires: Mon, 10 Mar 2014 21:20:44 GMT
  Cache-Control: max-age=0
  Date: Mon, 10 Mar 2014 21:20:44 GMT
  Content-Encoding: gzip
  Vary: Accept-Encoding
  </code></pre>
  
  <p>Any idea whats happening here? Why isn't it working through the browser? I tried it on Safari and Chrome both.</p>