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:

console screen shot from the developer console, the view doesn't get resolved due to this error

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);

You wouldn't happen to be setting a mime type or content type for an AJAX request? — TheSharpieOne, Sep 09 '13 at 20:15
Might be related to https://github.com/xdissent/iectrl/issues/2 Are you making any ajax calls? cross-domain ones? seems like a security issue! — neoeahit, Sep 09 '13 at 20:16
Yes, I am using lots of ajax since I am working in front of a REST api. Yes, the API is located on another subdomain, so i am using cors. Should be a problem with AngularJS CORS implementation and IE lt 10? — Oleg Belousov, Sep 09 '13 at 21:31
http://www.calebwoods.com/2014/05/10/angularjs-ie9-cors-nginx/ — , Jul 10 '17 at 14:55

score 74 · Accepted Answer · edited Feb 05 '14 at 14:21

74

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

edited Feb 05 '14 at 14:21

Blaise

13,139
9
69
97

answered Sep 16 '13 at 09:32

Oleg Belousov

9,981
14
72
127

1

This worked perfectly for me and took me just 5 minutes to implement! – Matthew Lanham Dec 31 '13 at 17:15
Unfortunately (at the time of this post) xDomain does not work with FormData / File uploads of any kind. Issue: https://github.com/jpillora/xdomain/issues/36 – Devin Mar 26 '14 at 21:42
Well, to support XHR-like file upload on legacy browsers, you should use an iFrame fallback my friend (no other way). Yes - another one beside xDomain – Oleg Belousov Mar 26 '14 at 21:52
I'm actually using a Flash fallback. Apparently xdomain just doesn't have support for the FormData API. – Devin Mar 27 '14 at 20:18
Well, flash is an option, but someone who uses ie7\8 might not have flash as well. For instance the blueimp jQuery ajax uploader uses an iFrame fallback, and it works well for many users – Oleg Belousov Mar 27 '14 at 22:04
3

Xdomain now provides "Seamless integration with FormData", according to https://github.com/jpillora/xdomain – Ade Aug 23 '14 at 16:13
If I could upvote this answer 50 times I would. Thank you ever so much, @OlegTikhonov, your answer helped me resolve a priority-1 issue early in the morning while working overseas. – aendra Aug 29 '14 at 16:26
2

Hey all, thought I should clarify, XDomain does support sending FormData objects cross-domain. However, your browser must support FormData first – so this rules out IE8 and 9. http://caniuse.com/#formdata – jpillora Mar 08 '15 at 05:23
Seems not work for me. I need angular router to run on file:// based. No network and local web server. – Jennie Ji Mar 17 '15 at 08:47
@JennieJi This is not a recommended setup – Oleg Belousov Apr 08 '15 at 13:45
Oddly enough...this worked after adding the master/slave. Thanks man! – Holt Oct 08 '15 at 19:17

score 4 · Answer 2 · edited Sep 10 '13 at 07:07

4

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.

edited Sep 10 '13 at 07:07

yprez

14,854
11
55
70

answered Sep 09 '13 at 23:23

aet

7,192
3
27
25

We do use proxy_pass in nginx to pass the API requests to gunicorn, and it doesn't seem to solve the issue. Is there any other configuration needed? – yprez Sep 10 '13 at 07:02
Oh, now I get it... a proxy_pass for it to be on the same domain. Need to think whether there are any complications that this could cause. – yprez Sep 10 '13 at 07:31

score -1 · Answer 3 · edited May 23 '17 at 11:54

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.

XMLHttpRequest Access Denied with AngularJS on any IE version below 10

3 Answers3

Linked