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 .

Answer 2

As a security measure, AJAX does not allow you to make requests to other domains. Cross Domain Ajax: a Quick Summary discusses several ways to work around the problem. The easiest way is to use your server as a proxy to download remote content:

This is one of the most common approaches. Your script calls your server, your server makes the call to the remote server and then returns the result back to the client. There are some definite advantages to this approach: you have more control over the entire lifecycle. You can parse the data from the remote server, do with it what you will before sending it back to the client. If anything fails along the way, you can handle it in your own way. And lastly, you can log all remote calls. WIth that you can track success, failure and popularity.

Answer 3

I wanted to post another variation on the top answer. I tried to use ProxyPass in my .htaccess file but I kept getting Internal Service Errors. Finally after some reading I discovered there was another way to do this with the rewrite engine.

RewriteEngine On
RewriteRule ^mail.php$ http://otherwebsite.com/mail.php [P,L]

The P in [P,L] tells the rewrite system that its using mod_proxy . This worked for me and I didn't get internal server errors.

The advantage to this approach is since it's using the Rewrite Engine , you have more control over the variables you might need to dynamically send to the script.

Answer 4

You can use dynamic script loading . Here is an article that I wrote about it.