XMLHttpRequest Access Denied with AngularJS on any IE version below 10

The solution that I've been able to achieve via the guidance of an experienced ng-dev at the Google AngularJS group is this xDomain library.

The setup is very simple, simply place a proxy.html file at the root of your API, with a regex/string for an allowed origin('master'), and a reference to the script at the frontend, and then point to this file from your frontend script('master').

It works by opening the proxy.html file in an iframe, and communicating with the CORS resource using postMessage.

Works like a charm with both $http and $resource.

You can also maintain normal functioning for normal browsers by placing the script above all JavaScript library includes:

<!--[if lte IE 9]><script src="xdomain.js" slave="http://example.org/proxy.html"></script><![endif]-->

Of course your problem is CORS related. IE10 uses a real XmlHttpRequest, but before that, IE did not. By far, the easiest way I have found to resolve these types of issues is to use apache or nginx to proxy the API.For example, with nginx, in your server {} block:

location /api {   proxy_pass http://my.server.name:12345/v1;   proxy_redirect off;}

Note that even jQuery does not support XDomainRequest and CORS outright, you have to add a plugin to get XDR. Also note, XDR has some severe limitations around CORS.

In my case the Response Headers contained

Content-Type:application/json; charset=UTF-8

and this is an issue for IE9, since it cannot properly handle/parse JSON Objects in responses.

Switching Response Headers to

Content-Type:text/plain; charset=UTF-8

In addition, make sure to have the following module included for IE9: https://stackoverflow.com/a/28905072/1202371

allowed to receive the response in text and then convert it to JSON object.