syamantics.com

Talking to your CouchDB backend from your HTML/Javascript frontend should have been trivial. CouchDB provides a RESTful API – that means it can be directly accessed through Ajax/Javascript. But, as ever, there is a “but”.

CouchDB runs on port 5984, not on port 80. If you remember the same origin policy, you know browsers reject requests to load a document or script unless the protocol, port and host are identical to the source of the current page.

Now, suppose we want to load a JSON document from CouchDB which is located at http://127.0.0.1:5984/my_db/_design/my_deisgn/_list/index/normal.js.

And we used the following HTML snippet for this,

<script src="http://127.0.0.1:5984/my_db/_design/my_deisgn/_list/index/normal.js">
</script>

But, as you already got it, it won't work unless this page is also being served from the same port – 5984, which is most probably not the case. Standard HTTP port is 80. doh! :)

So we need a way to communicate with the Couch backend on port 80. A simple way to do this is using Apache as a reverse proxy.

A reverse proxy is a webserver system that is capable of serving webpages sourced from other webservers - in addition to webpages on disk or generated dynamically by CGI - making these pages look like they originated at the reverse proxy.

To do this we first need to enable Apache's proxy and proxy_http modules. In Ubuntu or any other Debian system, we can do it by entering the following commands,

a2enmod proxy
a2enmod proxy_http

Next, we will need to modify our virtual host configuration file and add the following few lines to enable reverse proxy.

ProxyRequests Off
<Proxy *>
 	 Order Allow,Deny
 	 Allow from all
</Proxy>

ProxyRequests is set to Off (it is redundant though, as ProxyRequests is set to Off by default). In a typical reverse proxy configuration it should always set to Off. Access control is added via the <Proxy> control block. And access from any IP is allowed (we need to allow all our browser clients to access the proxy).

Once the proxy is enabled, we need to add two more lines in our vhost configuration -

RewriteEngine on
RewriteRule ^/couchdb/(.*) http://127.0.0.1:5984/$1 [QSA,P]

The above rewrite rule says – “serve any request to the host starting with “couchdb/” from CouchDB (that is http://127.0.0.1:5984/)”. The flag part of the rule is set to [QSA,P]. QSA stands for Query String Append – it asks Apache to append the query string part of the request instead of replacing it. And P stands for Proxy – it forces Apache to serve the request via internal proxy.

Once everything is set, our vhost configuration should look like something like the following,

<VirtualHost *:80>
        ProxyRequests Off
        <Proxy *>        
	 	 Order Allow,Deny
 	 	 Allow from all
        </Proxy>

        DocumentRoot /var/www/something

        RewriteEngine On
        RewriteRule ^/couchdb/(.*) http://127.0.0.1:5984/$1 [QSA,P]
	.
	.
	.
</VirtualHost>

At last, we need to save the vhost configuration and restart the Apache,

/etc/init.d/apache2 reload

And we are done. Now we can access CouchDB via http://ourhost/couch/ and can load a JSON document from our browser hosted application directly.

BTW, there's one problem to this type of browser hosted applications, our database will be open to everyone. We will need to add proper authentication mechanism in the backend so that only right users can manipulate the right data.