CORS, Internet Explorer 8, and XDomainRequest

Intro

I recently built a recipe app using a third-party API that supports CORS. Things were going along well, it was working well on all of the latest browsers (Chrome 28, Firefox 23, IE10). But when I started testing on Internet Explorer 8/9, I wasn’t getting any sort of response from the back-end. I immediately panicked, added a console.log fix and started placing breakpoints on my ajax statements to see what sort of request I was getting back.

The Problem

I came across a “No Transport” error being thrown by jQuery’s ajax. I had never heard of it, so after some searching on msdn and stackoverflow I came across a few suggestions to “quickly” fix this. Such as for jQuery 1.5+:

jQuery.support.cors = true;

After a couple other attempts, I accepted the fact that I will have to use IE’s XDomainRequest. To my astoundment, jQuery doesn’t natively support XDomainRequest.

Extending jQuery ajax to support XDomainRequest

Before I started implementing it, I came across a couple library’s on github and gists, but my journey to find the solution eventually lead me to @MoonScript’s jQuery-ajaxTransport-XDomainRequest repo on github. The examples provided worked like a charm on IE8, 9 and it looked like a reputable project, so I added a couple more tests to my outgoing ajax requests, then dropped in MoonScript’s library to my project. Problem solved. No need to reinvent the wheel here.

I couldn’t help myself so I’ll leave you with this:

Debug IE

Conclusion

Good news everybody, IE10 supports CORS using XMLHttpRequest. No more extending jQuery to support XDomainRequest.

XDomainRequest Gotchas

Some other things I came across that will save you a headache.

  1. The server protocol must be the same as the calling page protocol.
    1. This means you can’t make requests from file:// to http ://, http to https, or https to http (don’t ever do the latter)
    2. I found this the hard way by trying to run my code locally without first spinning up my localhost server.
  2. Only “text/plain” is supported for the request’s “Content Type header
  3. No custom headers can be added to the request

Resources:

Advertisements

2 thoughts on “CORS, Internet Explorer 8, and XDomainRequest

  1. Oh man, I can not believe I can not send custom headers in the request for IE9 and IE8. Do you know about any workaround solution?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s