title: Loading file from CloudFront using AJAX causes 403 (Forbidden) error
body: <p>I have an SVG file sitting in Amazon S3 and a Cloud Front distribution which points to my bucket as the origin.</p>
  
  <p>I have enabled CORS on the bucket like below :</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"&gt;
  &lt;CORSRule&gt;
      &lt;AllowedOrigin&gt;*&lt;/AllowedOrigin&gt;
      &lt;AllowedMethod&gt;GET&lt;/AllowedMethod&gt;
      &lt;MaxAgeSeconds&gt;3000&lt;/MaxAgeSeconds&gt;
  &lt;/CORSRule&gt;
  &lt;/CORSConfiguration&gt;
  </code></pre>
  
  <p>I also white listed below headers in the options of the behaviors of my cloud front distribution.</p>
  
  <pre><code>Access-Control-Request-Headers
  Access-Control-Request-Method
  Origin
  </code></pre>
  
  <p>In a single standalone HTML file, I can easily load the SVG like: </p>
  
  <pre><code>$(document).ready(function () {
              var settings = {
                  "crossDomain": true,
                  "url": "https://mycloudfront.cloudfront.net/images/one-TEST_1140924280.svg",
                  "method": "GET"
              };
  
              $.ajax(settings).done(function (response) {
                  var svg = document.importNode(response.documentElement,true);
                  $("#svg").append(svg);
              });
          });
  </code></pre>
  
  <p>When I do this in standalone HTML, the origin of the request header is <strong>null</strong>.
  But when I try to do this in my project (Spring Boot 1.5.3) The origin of the request header is <strong><a href="http://localhost:8080" rel="nofollow noreferrer">http://localhost:8080</a></strong> and I get 403 response as a result :</p>
  
  <blockquote>
    <p>XMLHttpRequest cannot load <a href="https://mycloudfront.cloudfront.net/images/one-TEST_1140924280.svg" rel="nofollow noreferrer">https://mycloudfront.cloudfront.net/images/one-TEST_1140924280.svg</a>. Response to the preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '<a href="http://localhost:8080" rel="nofollow noreferrer">http://localhost:8080</a>' is therefore not allowed access. The response had HTTP status code 403.</p>
  </blockquote>
  
  <p>Also, there is a header being added to the AJAX request <strong>access-control-request-headers:x-csrf-token</strong></p>
  
  <p>The exact same thing happens in my test environment on EC2. I thought localhost:8080 in origin is somehow the problem.</p>
  
  <p>Am I missing a configuration somewhere in CloudFront or S3?</p>