title: XMLHttpRequest cannot load URL. No 'Access-Control-Allow-Origin' header is present on the requested resource
body: <p>Here is what I have done and understood so far: </p>
  
  <p>My Webpage run from <code>http://localhost:80</code>, I need to access some API calls at <code>http://localhost:8080</code>.</p>
  
  <p>I require to enable CORS, as its a POST and Content-Type is application/json.</p>
  
  <p>So I implemented OPTIONS method on the server and set all the required headers.</p>
  
  <p>Here is the OPTIONS request which the browser makes
  Request :</p>
  
  <pre><code>OPTIONS /0/VERIFICATION HTTP/1.1
  Host: localhost:8080
  Connection: keep-alive
  Cache-Control: no-cache
  Pragma: no-cache
  Access-Control-Request-Method: POST
  Origin: http://localhost
  User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_0) AppleWebKit/537.36 (KHTML,     like Gecko) Chrome/36.0.1985.125 Safari/537.36
  Access-Control-Request-Headers: x-key, x-signature, content-type
  Accept: */*
  Referer: http://localhost/jquery.html
  Accept-Encoding: gzip,deflate,sdch
  Accept-Language: en-US,en;q=0.8
  </code></pre>
  
  <p>Response : </p>
  
  <pre><code>HTTP/1.1 200 OK
  Allow: POST,GET,PUT,DELETE,OPTIONS
  Access-Control-Allow-Origin: *
  Accept: */*
  Access-Control-Request-Headers: X-Key,X-Signature,Content-Type
  Access-Control-Allow-Headers: X-Key,X-Signature,Content-Type
  Content-Type: application/json; charset=UTF-8
  Content-Length: 0
  </code></pre>
  
  <p>So I can see all the appropriate headers being set and all looks good until the actual request is made which fails with the following error </p>
  
  <p>Error in Chrome Console</p>
  
  <pre><code>XMLHttpRequest cannot load http://localhost:8080/0/VERIFICATION. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access. 
  </code></pre>
  
  <p>Here is my javascript code which is making the actual request </p>
  
  <pre><code>function createCORSRequest(method, url) {
      var xhr = new XMLHttpRequest();
      xhr.withCredentials = false;
      if ("withCredentials" in xhr) {
          xhr.open(method, url, true);
      } else if (typeof XDomainRequest != "undefined") {
          xhr = new XDomainRequest();
          xhr.open(method, url);
      } else {
          xhr = null;
      }
      return xhr;
   }
  
  function makeCorsRequest() {
      var url = "http://localhost:8080/0/VERIFICATION";
      var xhr = createCORSRequest('POST', url);
      xhr.onload = function() {
          var text = xhr.responseText;
          alert('Response from CORS request to ' + url + ': ' + title);
      };
  
      xhr.onerror = function() {
          alert('Woops, there was an error making the request.');
      };
      xhr.setRequestHeader("Content-Type", "application/json");
      xhr.setRequestHeader("X-Signature", "abcd");
      xhr.setRequestHeader("X-Key", "key1");
      xhr.send("{json data}");
   }
  </code></pre>
  
  <p>I am using Chrome browser to test the above scenario, my server is a netty based server and html pages are being served via apache.</p>
  
  <p>Update added .htaccess based on the comment below and still the same error.</p>
  
  <pre><code>curl -v 'http://localhost/jquery.html'
  * Connected to localhost (127.0.0.1) port 80 (#0)
  &gt; GET /jquery.html HTTP/1.1
  &gt; User-Agent: curl/7.36.0
  &gt; Host: localhost
  &gt; Accept: */*
  &gt; 
  &lt; HTTP/1.1 200 OK
  &lt; Date: Fri, 18 Jul 2014 07:03:22 GMT
  * Server Apache/2.4.9 (Unix) PHP/5.5.9 is not blacklisted
  &lt; Server: Apache/2.4.9 (Unix) PHP/5.5.9
  &lt; Last-Modified: Sun, 30 Mar 2014 06:31:53 GMT
  &lt; ETag: "3af-4f5cd17308840"
  &lt; Accept-Ranges: bytes
  &lt; Content-Length: 943
  &lt; Access-Control-Allow-Origin: *
  &lt; Access-Control-Allow-Headers: origin, x-requested-with, x-http-method-override, content-    type
  &lt; Access-Control-Allow-Methods: PUT, GET, POST, DELETE, OPTIONS
  &lt; Content-Type: text/html
  </code></pre>