Setting up a Transparent Proxy in XAMPP / MAMP

Ever wanted to make javascript requests to your own API but not wanted to host your own version of the API locally? Of course, if you try and make a request from http://localhost/example to http://www.youtube.com/api you will encounter issues with cross domain javascript not being allowed. This article shows you a way of making this kind of request possible.

What is a transparent proxy?

Simply put, a transparent proxy is a something that acts as an intermediary for request between a client and another endpoint. By requesting one particular URL your proxy causing the request to be sent somewhere else.

Can't I do this some other way?

Yep, there are a few traditional (and a few much newer) solutions to this problem. One of the most common being to run a local file written in a language such as PHP to proxy your requests and send them on via curl….For example, you may make a request passing the actual API request in the query string: to http://localhost/example/proxy.php?url=http://example.com/api?query=a&param=b

Your PHP would then make the request to the domain and simply set the headers of the response and print out the data returned for your javascript code to handle.

It's actually a lot simpler just to choose a specific URL on your localhost and get apache to proxy the requests for you, no backend proxy script needed. So you would proxy from http://localhost/api to http:///api. Then in your javascript app, you can just request data from http://localhost/api.

How to implement it.

I'm going to detail how to set this up on XAMPP running under Mac OSX and then how to do it using plain old Apache2 on Ubuntu, but the steps should be very similar regardless of which particular method you are using to run your web server. All that is probably different are the file locations and mods you currently have enabled.

IMPORTANT NOTE / DISCLAIMER

I am recommending this method for running for development purposes only. Simply copying the steps below on a production server is asking for trouble as this is essentially running an open proxy and can open some serious security flaws. If you need to run this kind of proxy on a production server, additional steps must be taken to secure the system but these are above the scope of this article. As long as you understand this…Carry on.

XAMPP on MacOS

Firstly, we need to check that the necessary modules are already being loaded by apache when it starts up. This is a relatively simple task. I am going to assume you have installed XAMPP at its default path of /Applications/XAMPP. If you changed it, substitute the paths below for your individual XAMPP paths.

(If you are doing this in terminal, you'll probably need to run the command to open the file as sudo e.g sudo vi /Applications/XAMPP/Xamppfiles/httpd.conf).

If you're using an application to open the file, you'll probably need to enter your password when you hit save. Don't be alarmed if the password auth box pops up.

Open /Applications/XAMP/Xamppfiles/etc/httpd.conf

We need to make sure the following lines are uncommented (A comment in a .conf file begins with #)

LoadModule rewrite_module modules/mod_rewrite.so LoadModule proxy_module modules/mod_proxy.so LoadModule proxy_http_module modules/mod_proxy_http.so

If all these are now uncommented navigate to the very bottom of the file and add the following:

#Include local proxy rules Include etc/extra/httpd-proxy.conf

Save and close the file.

Next create a new file called httpd-proxy.conf at /Applications/XAMPP/Xamppfiles/etc/extra and add the following:

ProxyRequests On <Proxy *> Order deny, allow Allow from All </Proxy> ProxyPass /path/to/local/api <remote api url> ProxyPassReverse /path/to/loca/api <remote api url>

Save and close this file. A couple of things to note here the ProxyPass and ProxyPassReverse lines contain the url you would like to proxy on, ignoring the base url of your host. For example if you use /api - http://localhost/api will be your proxy URL. If you use /proxy/api http://localhost/proxy/api will be your proxy address.

Now you should restart XAMPP.

You should now be able to make requests via your local proxy to your remote API url. If it's not working, put your local proxy address in your browser…You should see exactly what you would if you put the remote api url directly into your address bar.

Apache2 on Ubuntu

This is a pretty simple process. You will probably have to run most of the commands as with sudo.

Firstly, enable to mods needed to run the proxy by typing the following commands into a terminal.

sudo a2enmod rewrite sudo a2enmod proxy sudo a2enmod proxy_http

Next, add the following inside the default VirtualHost in /etc/apache2/sites-available/default (Or if you're running your own vhosts add it to the most appropriate.

ProxyRequest On <Proxy *> AddDefaultCharset off Order allow, deny Allow from All </Proxy> ProxyPass /path/to/local/api <remote api url> ProxyPassReverse /path/to/local/api <remote api url>

Save and close the file and restart apache:

sudo apache2 restart

You should now be able to make requests via your local proxy to your remote API url. If it's not working, put your local proxy address in your browser…You should see exactly what you would if you put the remote api url directly into your address bar.

Summing up

You should now have a local proxy running to enable you to not have to run a backend script proxy locally. If you're having any issues with this, leave a comment below and I'll do my best to help you out.