xmlhttprequest - Access denied in IE 10 and 11 when ajax target is localhost

Question

I'm trying to do a ajax call between a server (http) that is on internet. And target that to my own localhost. FF/Chrome/ ETC... works. It's ONLY an IE issue. IM USING IE 11 AND 10.

The request is don't even done. The "denied access" is thrown instantly.

This is the code. Just for you to see.

Is not the classical HTTP/HTTPS error in IE8 AND IE9. This is something else, but the documentation is not helpful.

$jq.ajax({
            contentType: 'application/json',
            url: url,
            dataType: 'json',
            crossDomain: true,
            beforeSend: function (xhr) {
                xhr.withCredentials = true; 
                xhr.setRequestHeader("Authorization", "Basic " + $jq.base64.encode(username and password));
            },
            success: function (data, status, headers) {},
            error: function (xhr, status, error) {}

The status is 0 in xhr object and error is "Denied access"

Answer 1

Internet Explorer raises this error as part of its security zones feature. Using default security settings, an "Access is Denied" error is raised when attempting to access a resource in the "Local intranet" zone from an origin in the "Internet" zone.

If you were writing your Ajax code manually, Internet Explorer would raise an error when you try to open the resource. For example:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost/', true); // This line will trigger an error
xhr.send();

You can work around this error by adding the origin site to the "Trusted sites" security zone. You can test this by adding "http://client.cors-api.appspot.com" to your "Trusted sites" zone and using this test page at test-cors.org with your localhost site as the Remote URL.