November 29, 2009   -   Web Development   -   14 comments

One of the restrictions imposed by all browser side programming languages is that one cannot make cross-domain ajax requests. This restriction comes because of the same origin policy and even sub-domain ajax calls are not allowed. In this blog post, I will demo two methods of making cross-sub-domain ajax requests. First demo will use mod_proxy module of Apache. While the second demo will use iframe and javascript tricks for making sub-domain ajax requests.

Using mod_proxy for cross-domain ajax requests
By enabling mod_proxy module of apache2, we can configure apache in reverse proxy mode. In reverse proxy mode, apache2 appears be like an ordinary web server to the browser. However depending upon the proxy rules defined, apache2 can make cross-domain request and serve data back to the browser.

Demo Link for Cross Domain Ajax using Apache mod_proxy

In this demo, I will make cross-domain request to http://gtalkbots.com/reverse-proxy-data.php. To make this cross-domain request successful, I have configured apache2 as shown below:

  1. Enable mod_proxy module. 
    $ a2enmod proxy
$ a2enmod proxy_http
$ a2enmod proxy_connect
  2. Add the following lines to httpd.conf: 
    $ cat /private/etc/apache2/httpd.conf | grep mod_proxy

LoadModule proxy_module libexec/apache2/mod_proxy.so
LoadModule proxy_connect_module libexec/apache2/mod_proxy_connect.so
LoadModule proxy_http_module libexec/apache2/mod_proxy_http.so
  3. Create a file reverse-proxy.conf and add the following config: 
    $ cat /private/etc/apache2/other/reverse-proxy.conf

ProxyRequests Off

<Proxy *>
Order deny,allow
Deny from all
Allow from .abhinavsingh.com
</Proxy>

ProxyPass /webdemos/crossdomainajax/reverse-proxy-get.php http://gtalkbots.com/reverse-proxy-data.php
ProxyPassReverse /webdemos/crossdomainajax/reverse-proxy-get.php http://gtalkbots.com/reverse-proxy-data.php

In brief, when Apache sees an incoming ajax request to /webdemos/crossdomainajax/reverse-proxy-get.php , it simply proxy pass it to http://gtalkbots.com/reverse-proxy-data.php and return back the response. The whole process is hidden from the users on the demo page.

Using iframes for cross-domain ajax requests
Another method of achieving sub-domain ajax requests is by using iframes. However, javascript does not allow communication between two frames if they don’t have same document.domain. The simplest of the hacks to make this communication possible is to set document.domain of the iframe same as that of the parent frame.

Demo Link for Sub-Domain Ajax using iFrames

In this demo, I will make a sub-domain request to http://img1.abhinavsingh.com/iframe-data.php. To make this possible, I load an iframe with src="http://img1.abhinavsingh.com/iframe-demo.php" and set document.domain="abhinavsingh.com"; for the iframe.

iframe-demo.php

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
	jQuery(function($) {
		function getTimestamp() {
			$.get(ajax_url,
				{},
				function(data) {
					$('#iframe_ajax_data', top.document).html('Server time received through iframe ajax: '+data);
				}
			);
		}

		document.domain = "abhinavsingh.com";
		$('#link', top.document).click(function() {
			getTimestamp();
		});
	});
</script>

In brief, iframe-demo.php sets an onclick event on $('#link' top.document) , which makes a sub-domain ajax request to http://img1.abhinavsingh.com/iframe-data.php

Enjoy!