title: CORS Request - Terminal Works, Browser Fails
body: <p>I'm trying to fetch an image via ajax from an amazon server. That server is configured to return the <code>Access-Control-Allow-Origin: *</code> header.</p>
  
  <p>The issue is that when I do the request from terminal, I see the response fine.</p>
  
  <p>But when I do the AJAX request from browser, I'm blocked and I don't see that header on the response.</p>
  
  <p>Terminal request:</p>
  
  <pre><code>➜  ~  curl -sI -H "Origin: google.com" -H "Access-Control-Request-Method: GET" http://my-domain/my-image.jpg
  HTTP/1.1 200 OK
  Content-Type: image/jpeg
  Content-Length: 595284
  Connection: close
  Date: Thu, 13 Aug 2015 12:28:02 GMT
  Access-Control-Allow-Origin: *
  Access-Control-Allow-Methods: GET, POST
  Access-Control-Max-Age: 3000
  Content-Disposition: attachment; filename="Hydrangeas.jpg"
  Last-Modified: Thu, 13 Aug 2015 07:00:21 GMT
  x-amz-version-id: null
  ETag: "bdf3bf1da3405725be763540d6601144"
  Server: AmazonS3
  Age: 4132
  X-Cache: Hit from cloudfront
  Via: 1.1 b7b782c917cd62c6605a1684c071a774.cloudfront.net (CloudFront)
  X-Amz-Cf-Id: 7t1gB74LHHWEIXcl_ml6pWC9voDrfSakCMUJ2KeAjMYZ-37aZYmPcg==
  </code></pre>
  
  <p>When I try from Chrome/FF (haven't tried others), I see the canonical error message and when I look in the network tab I don't see the ACAA header:</p>
  
  <pre><code>XMLHttpRequest cannot load ***. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '***' is therefore not allowed access.
  </code></pre>
  
  <p>This is the code I use to try and get the image:</p>
  
  <pre><code>var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function(){
       if (this.readyState === 4 &amp;&amp; this.status === 200){
           // never gets here, status is always 0 from the block
       }
  }
  xhr.open('GET', url);
  xhr.responseType = 'blob';
  xhr.send();
  </code></pre>