javascript - Making an AJAX request to another server

Question

I have AJAX code where if you request an AJAX call to remote server the request fails:

function loadXMLDoc() {
  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) {
      document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
    }
  }

  xmlhttp.open("GET", "http://www.google.com", true);
  xmlhttp.send();
}

What can I do to solve this?

Answer 1

It looks like you have bumped into the same origin policy. You have to use a relative path instead of your absolute http://www.google.com path.

As one possible workaround, you could set up a very simple reverse proxy (with mod_proxy if you are using Apache). This would allow you to use relative paths in your AJAX request, while the HTTP server would be acting as a proxy to any "remote" location.

The fundamental configuration directive to set up a reverse proxy in mod_proxy is the ProxyPass. You would typically use it as follows:

ProxyPass     /web-services/     http://third-party.com/web-services/

In this case, the browser would be requesting /web-services/service.xml but the server would serve this by acting as a proxy to http://third-party.com/web-services/service.xml.

Another common workaround would be to use JSONP.