Cross-Domain AJAX Requests to Amazon S3 with CORS or JSONP

Since Amazon S3 supports CORS, you can make AJAX calls to a bucket from any domain. This example loads an alert message and conditionally updates the DOM, but the configuration is the same for any GET request (I haven’t played with POST yet).

  1. Create an S3 bucket and add a CORS policy.
    <CORSConfiguration>
        <CORSRule>
            <AllowedOrigin>*</AllowedOrigin>
            <AllowedMethod>GET</AllowedMethod>
            <MaxAgeSeconds>3000</MaxAgeSeconds>
            <AllowedHeader>*</AllowedHeader>
        </CORSRule>
    </CORSConfiguration>
    
  2. Create alert.json (validate with JSONLint to be safe)
    {
      "enabled":true,
      "header":"Alert:",
      "body":"This is an alert message."
    }
    
  3. Upload alert.json to your bucket, set the Content-Type header to application/json, and grant Open/Download permissions to Everyone (or use a bucket policy)
  4. Call jQuery 1.5+ and jQuery-ajaxTransport-XDomainRequest (for IE 8 & 9 support)
    <script type='text/javascript' src='//code.jquery.com/jquery-1.10.1.js'></script>
    <!--[if lte IE 9]>
    <script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/jquery-ajaxtransport-xdomainrequest/1.0.0/jquery.xdomainrequest.min.js'></script>
    <![endif]-->
    <h3 id='globalalertheader'></h3>
    <p id='globalalertbody'></p>
    
  5. Now you can call jQuery.ajax()
    $(function () {
        $.ajax({
            // XDomainRequest protocol (IE 8 & 9) must be the same scheme as the calling page
            url: ('https:' == document.location.protocol ? 'https://' : 'http://') + 'example-bucket.s3.amazonaws.com/alert.json',
            dataType: 'json'
        }).done(function (data) {
            if (data.enabled === true) {
                $('#alertheader').html(data.header);
                $('#alertbody').html(data.body);
            }
        });
    });
    

Update: If you prefer JSONP instead of CORS:

  1. Create alert-jsonp.json with a static wrapper function around the data (name doesn’t have to be content).
    content({
       "enabled":true,
       "header":"Alert:",
       "body":"This is an alert message."
    });
    
  2. Upload alert-jsonp.json to your bucket, set the Content-Type header to application/json, and grant Open/Download permissions to Everyone (or use a bucket policy)
  3. Call jQuery 1.5+ (no polyfill needed for IE)
    <script type='text/javascript' src='//code.jquery.com/jquery-1.10.1.js'></script>
    <h3 id='globalalertheader'></h3>
    <p id='globalalertbody'></p>
    
  4. Call jQuery.ajax() with jsonpCallback matching the wrapper function you declared in alert-jsonp.json.
    $.ajax({
        url: 'https://example-bucket.s3.amazonaws.com/alert-jsonp.json',
        dataType: 'jsonp',
        jsonp: false,
        jsonpCallback: 'content'
    }).done(function (data) {
        if (data.enabled === true) {
            $('#globalalertheader').html(data.header);
            $('#globalalertbody').html(data.body);
        }
    });
    
Categorized: Software

Leave a Reply

Your email address will not be published. Required fields are marked *