JavaScript XMLHttpRequest only works with inspector open (Access-Control-Allow-Origin error)
<p>I'm trying to load an image from Amazon S3 using the JavaScript XMLHttpRequest() function.</p>

<pre><code>         var xhr = new XMLHttpRequest();
         xhr.onload = function (e) {
           if (e.target.status &gt;= 300) {
             _this3.onImageError.call(_this3, _constants.ERRORS.IMAGE_FAILED_TO_LOAD);
             return;
           }
           _this3.loadFile(e.target.response);
         };
         xhr.open('GET', imageSrc);
         xhr.responseType = 'blob';
         xhr.send();`
</code></pre>

<p>My S3 bucket is properly configured for CORS (99% sure). Here's the rule I'm using, I plan on making the Origin more specific one this works:</p>

<pre><code>&lt;CORSRule&gt;
    &lt;AllowedOrigin&gt;*&lt;/AllowedOrigin&gt;
    &lt;AllowedMethod&gt;HEAD&lt;/AllowedMethod&gt;
    &lt;AllowedMethod&gt;GET&lt;/AllowedMethod&gt;
    &lt;AllowedMethod&gt;PUT&lt;/AllowedMethod&gt;
    &lt;AllowedMethod&gt;POST&lt;/AllowedMethod&gt;
    &lt;AllowedMethod&gt;DELETE&lt;/AllowedMethod&gt;
    &lt;ExposeHeader&gt;x-amz-server-side-encryption&lt;/ExposeHeader&gt;
    &lt;ExposeHeader&gt;x-amz-request-id&lt;/ExposeHeader&gt;
    &lt;ExposeHeader&gt;x-amz-id-2&lt;/ExposeHeader&gt;
    &lt;AllowedHeader&gt;*&lt;/AllowedHeader&gt;
&lt;/CORSRule&gt;
</code></pre>

<p>I've also tried the following rule (with identical results) as I really only care about GET requests at the moment:</p>

<pre><code>&lt;CORSRule&gt;
    &lt;AllowedOrigin&gt;*&lt;/AllowedOrigin&gt;
    &lt;AllowedMethod&gt;GET&lt;/AllowedMethod&gt;
    &lt;AllowedHeader&gt;*&lt;/AllowedHeader&gt;
&lt;/CORSRule&gt;
</code></pre>

<p>In Chrome, when attempting to load the image I get a 'Access-Control-Allow-Origin' error. If I first open the Inspector then attempt to load the image I get expected behavior with no error.</p>

<p>I've attempted to catch the request with Wireshark, since trying to monitor the bug with Inspector causes it to resolve itself, but have been unsuccessful.</p>

<p>The code I am trying to implement is here <a href="https://github.com/scottcheng/cropit" rel="nofollow">https://github.com/scottcheng/cropit</a> .</p>

<p>The bug I am experiencing was mentioned in that repository here <a href="https://github.com/scottcheng/cropit/issues/118" rel="nofollow">https://github.com/scottcheng/cropit/issues/118</a> but nothing in the thread resolved my issue.</p>

<p>Curious if anyone has ever run into this wonky Inspector behavior before. Let me know if I can provide any more details/screenshots/what have you.</p>

<p>Thanks,</p>