CODEWITHSUNDEEP
jqueryamazon-web-servicesamazon-s3corsgetjson
Michael Mikhjian
Michael Mikhjian

Reputation: 2794

IE9 + CORS + jQuery + Amazon S3

To sum it up: Everything is working flawlessly with the following:

Site => via jQuery getJSON => S3 JSON file (CORS Enabled)

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

This works flawless in every browser except IE9.

Any ideas? I thought the CORS rules would do the fix for IE9, but apparently not. And here's the other part: I get no errors in IE9 console, so I had to go line by line to figure this crappy CORS issue.

Upvotes: 2

Views: 1376

Answers (1)

monsur
monsur

Reputation: 47937

IE9 uses the XDomainRequest object to make CORS requests, which is a limited version of the XMLHttpRequest object used by other browsers. An overview of the XDomainRequest object can be found here:

http://blogs.msdn.com/b/ieinternals/archive/2010/05/13/xdomainrequest-restrictions-limitations-and-workarounds.aspx

Look specifically at item #3, which states: "No custom headers may be added to the request". By looking at your configuration, it looks like you expect an Authorization header. This is not allowed in IE9. (Although to be absolutely sure, it would be helpful to see an example of how you are making the request).

Also note if you are not doing so already, you should use the XDomainRequest for IE8/9. This article provides an example of how to pick the correct object:

http://www.nczonline.net/blog/2010/05/25/cross-domain-ajax-with-cross-origin-resource-sharing/

The relevant piece of code is:

function createCORSRequest(method, url){
  var xhr = new XMLHttpRequest();
  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;
}

Upvotes: 3

Related Questions