How to correctly configure a reverse proxy with Apache, to be used for cross-domain AJAX?

Question

Needing to develop a web application that at the same time is highly dependent on an API but at the same time cannot reside on the same domain as the API itself, it\'s been quit

Answer 1

You are having a server with a public IP and apache is running on it.Now you want to host your applications on LAN and also want them to be accessible on internet the important part is these applications are still running on the machines on LAN.

                           |--------------192.168.1.3
                           |            (internal3.example.com)
                           |
                           |--------------192.168.1.4
                           |            (internal4.example.com)
  (Public IP )             |
            A--------------|
(reverse proxy server)     |
  (192.168.1.25)           |
example.com                |
                           |--------------192.168.1.1
                           |            (internal1.example.com)
                           |
                           |--------------192.168.1.2
                           |            (internal2.example.com)

I am using Ubuntu to host Apache the vhost definition in case of Debian based systems the definiton of websites is done on

/etc/apache2/sites-enabled/*.conf

where *conf corresponds to

internal1.conf internal2.conf internal3.conf internal4.conf

The vhost definition of each of these sites will be as follows

/etc/apache2/sites-enabled/internal1.example.conf

<virtualhost *:80>
    ServerAdmin webmaster@localhost
    ServerName internal1.example.com
    ProxyRequests off
    <proxy *>
        Order deny,allow
        Allow from all
    </proxy >
    ProxyPass / http://192.168.1.1/
    ProxyPassReverse / http://192.168.1.1/ 
</VirtualHost>

/etc/apache2/sites-enabled/internal2.example.conf

<virtualhost *:80>
      ServerAdmin webmaster@localhost
      ServerName internal2.example.com
      ProxyRequests off
      <proxy *>
      Order deny,allow
      Allow from all
      </proxy >
      ProxyPass / http://192.168.1.2/
      ProxyPassReverse / http://192.168.1.2/
</VirtualHost >

/etc/apache2/sites-enabled/internal3.example.conf

<virtualhost *:80>
      ServerAdmin webmaster@localhost
      ServerName internal3.example.com
      ProxyRequests off
      <proxy *>
      Order deny,allow
      Allow from all
      </proxy >
      ProxyPass / http://192.168.1.3/
      ProxyPassReverse / http://192.168.1.3/
</VirtualHost >

/etc/apache2/sites-enabled/internal4.example.conf

<virtualhost *:80>
    ServerAdmin webmaster@localhost
    ServerName internal4.example.com
    ProxyRequests off
    <proxy *>
        Order deny,allow
        Allow from all
    </proxy>
    ProxyPass / http://192.168.1.4/
    ProxyPassReverse / http://192.168.1.4/
</VirtualHost>

Note in all of the above vhost definitions I have dropped the options of Log files. So if you apply to a production server add them in each of the vhost file. Above is just to give you a clear cut example as how it can be working. I run a very complex Apache setup so above is just a small example to help you.

Now coming to Ajax part of your question

in chrome press Ctrl+Shift+I you will see where exactly the application is broken, it will give you some clue, (issue the request from a machine different from the machine on which you are developing web application) also if you can look at apache logs if the request from http://sample page which has ajx api actually reached your apache server that will give you more hint, if the proxy is forwarding your request correctly, post the HTTP HEADERS by using some tool in firefox like live_http in condition when there was no request and the condition when the request was made by the application that way observing the headers one can help you if the request reached the server behind the reverse proxy,also check the logs of server which is running reverse proxy if the request from web reached it or not and if the request reached what is the URL that was requested.This will give you a clue,

and for development purpose in your .conf files disable the rewrite rules for some time to test ,do it one by one.

Answer 2

The problem here is that the browser is trying to protect you from getting pwned by random javascript placed on some web page. If it would let all javascript to run in the same context you would lose you Facebook sessions cookies or some other data to bad guys.

In this case the culprit could be something so simple as Chrome does not consider 'dev' to be a Fully Qualified Domain Name so it will fail the same origin test. Other reason might be that at some point you are getting stuff from app.somesite.dev and at some point you send requests to 'dev'

The servers don't care what they send and it is the browser you need to fool to believe everything is coming from the same host

1. I would replace 'dev' in the hosts file with dev.example.com 127.0.0.1
2. I would make sure everything coming out of the Apache proxy only refers to dev.example.com no matter from which server it comes
3. Only use dev.example.com in your code

If all else fails you could add a HTTP header 'Access-Control-Allow-Origin: *' to allow any origin, but I would not use this except just in dev-environments.

PS. Even if you get javascript from example.com:80 that javascript can't even call example.com:443 or javascript from example.com cannot make xmlhttprequests to dev.example.com

Answer 3

on 127.0.0.1, your html code should be:

$.ajax({
    url: "http://127.0.0.1/a/w/currencies",
    type: "GET",
    dataType: "json",
    data: {
    },
    success: function(data){
        console.log(data);
    }
}); 

on 127.0.0.1, your apache conf should be:

...

<VirtualHost dev:8080>
            ...
            ProxyPass / https://app.somesite.com:5002/
            ProxyPassReverse / https://app.somesitecom:5002/
            ...
</VirtualHost>

on this case, your browser will not cross-domain, because your url and ajax use the same domain.But exactly, ajax request https://app.somesite.com:5002/ , I don't know if it is a reverse-proxy ,but it seems work for me. Have a try :)

Answer 4

I will be attempting the same thing myself pretty soon which is how I found this thread.

I wonder if the actual url that you are using in the AJAX request is wrong. Essentially, you are connecting to the proxy. It is forwarding you to the port 8080 address. Then you try to make an AJAX request directly to the 8080 address? A relative link may work so that the AJAX call gets forwarded along the same path so that javascript knows it's the same origin.

An alternative is backending with PHP. Lecture 7 of this online course covers AJAX and does an example with PHP to completely circumvent same origin restrictions. http://academicearth.org/courses/building-dynamic-websites/

I just found this, it seems like a better solution. http://darius.kruythoff.net/blog/2011/xss-with-apache/