cross domain XHR

Question

Hi I am facing a strange problem. I need to use webservice from different domain. So I looked into the code of chrome addon Simple REST Client and I have found out, that they are using this function to make XHR

function sendRequest() {
clearFields();
if ($("#url").val() != "") {
    var a = new XMLHttpRequest;
    a.onreadystatechange = readResponse;
    try {
        a.open($("input[type=radio]:checked").val(), $("#url").val(), true);
        //This code is for adding headers
        var b = $("#headers").val();
        b = b.split("\n");
        for (var c = 0; c < b.length; c++) {
            var d = b[c].split(": ");
            d[1] && a.setRequestHeader(d[0], d[1])
        }
        jQuery.inArray($("input[type=radio]:checked").val(), ["post", "put"]) > -1 ? a.send($("#postputdata").val()) : a.send("")
    } catch (e) {
        console.log(e);

        $("#responsePrint").css("display", "")
    }
} else {
    console.log("no uri");

}
}

So I have created similar one

    var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var test = $(xmlhttp.responseText);
    }
}
xmlhttp.open("GET", "http://aplikace.mvcr.cz/sbirka-zakonu/SearchResult.aspx?q=1/2013&typeLaw=zakon&what=Cislo_zakona_smlouvy", true);
//xmlhttp.setRequestHeader('Access-Control-Allow-Origin','*');
 xmlhttp.send();

But with my code I am getting XMLHttpRequest cannot load http://aplikace.mvcr.cz/sbirka-zakonu/SearchResult.aspx?q=1/2013&typeLaw=zakon&what=Cislo_zakona_smlouvy. Origin http://localhost:51582 is not allowed by Access-Control-Allow-Origin. So where is the problem? Why the former code works and my doesn't even they are almost the same?

EDIT: I have also tried to call hte webservice with this function

$.ajax({
    type: "GET",
    url: "http://aplikace.mvcr.cz/sbirka-zakonu/SearchResult.aspx?q=1/2013&typeLaw=zakon&what=Cislo_zakona_smlouvy",
    contentType: "script; charset=utf-8",
    dataType: "jsonp",
    success: function (msg) {
        var tes = $(msg);
    },
    error: function (xhr, status, err) {
    }
});

and what I want to do is to read the response as DOM, because the webservice returns whole HTML page and I need only one div, but now I get Uncaught SyntaxError: Unexpected token < which points to this line

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

As I can see in the Network tab, the request works, but due to the error the success function is never called and I cant access the data.

Does the original code work when run from http://localhost:51582? — Christopher Scott, Apr 12 '13 at 18:58
possible duplicate of [XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin](http://stackoverflow.com/questions/3595515/xmlhttprequest-error-origin-null-is-not-allowed-by-access-control-allow-origin) — Dagg Nabbit, Apr 12 '13 at 22:35

score 1 · Answer 1 · answered Apr 12 '13 at 19:18

1

Same Orgin Policy Prevents You From Doing It. Hence the error http://localhost:51582 is not allowed by Access-Control-Allow-Origin.

answered Apr 12 '13 at 19:18

epascarello

204,599
20
195
236

but how comes that from the REST client, which is addon for the browser, hence run from my IP, it works? And if it is as you are saying, is there any way how to make it work? Because whe I tried to use jQuery and get() with parameter jsonp it worked, but I can't use jQuery in this case – m3div0 Apr 12 '13 at 19:40
1

If they support JSONP than make the JSONP request. – epascarello Apr 12 '13 at 20:22
I tried to use jsonp as zou have advised, but I am getting another error as I described in edit – m3div0 Apr 12 '13 at 20:50

roberto · Accepted Answer · 2013-04-13T11:34:46.373

As others have pointed out, this is due to the Same Origin Policy. This is something that is enforced by the browser, which means that an add-on can bypass this restriction. This should answer your initial question.

How to get around this? There are many ways, but most of them require some sort of cooperation from the server. People already mentioned some of those workarounds here and apparently you tried the JSONP path and got the error.

Why did you get the error? Because the script expected to get a response in JSONP format and it didn't: it got a HTML response instead. I think this approach won't work in your case, as the server definitely is not designed for this.

Now the real question is: why do you want to do this? Depending on your answer, I can think of several solutions.

For example, if you need to access the information from that page to be displayed on your website, the simplest solution, I believe, is to use some proxy (see http://developer.yahoo.com/javascript/howto-proxy.html for some more info).

If you're just using this on your own machine for personal purposes, it is possible in some browsers to specifically disable the same origin policy checks.

In Chrome, for example, running it with the following option will do the trick: (Warning: unsupported! Security will definitely suffer)

chrome --disable-web-security

If you do this (disable your browser's security checks), even a simple:

$.get("http://aplikace.mvcr.cz/sbirka-zakonu/SearchResult.aspx?q=1/2013&typeLaw=zakon&what=Cislo_zakona_smlouvy", function(data) {
    console.log(data);
},'html');

will work fine.

score 0 · Answer 3 · answered Apr 12 '13 at 21:23

A browser addon/extension runs with different permissions and in a different environment from regular web pages. I suspect your code should work if made into an addon. It just won't work as a regular web page.

There are workarounds to this problem from CORS to proxying. Search for "cross domain ajax" here or google around.

cross domain XHR

3 Answers3