While viewing my application on any Microsoft IE browser of version earlier than 10, I get the following weird error at the console:
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.