internet explorer - XMLHttpRequest Access Denied with AngularJS on any IE version below 10

Question

While viewing my application on any Microsoft IE browser of version earlier than 10, I get the following weird error at the console:

I've tried canceling the console with adding the following JavaScript code prior to the AngularJS lib:

console.log = function(){};
window.console = {log: function(){}};

It didn't make a difference. The same error in IE 10 appears as:

SCRIPT7002: XMLHttpRequest: Network Error 0x80070005, Access is denied.

probably me trying to get the '/me' from the API in order to check if the user is authenticated or a guest.

Basically. eliminating those annoying console errors each time the server gives a response other than 2XX or 3XX would be great!

UPDATE: This seems to be related to accessing an API over a different sub domain(CORS);

Answer 1

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]-->