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 quite tricky getting around the "Same Origin Policy" when making asynchronous HTTP requests (AJAX). At one point, I was recommended to install WAMP on my computer (running Windows 7) and to configure a reverse proxy with Apache. The same person gave me the Apache directives bellow that I added to the httpd.conf file, after telling me to create an alias for the IP 127.0.0.1 named dev , within the file at c:\windows\system32\drivers\etc\hosts (which I did):

LoadModule headers_module modules/mod_headers.so
LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_connect_module modules/mod_proxy_connect.so
LoadModule proxy_http_module modules/mod_proxy_http.so
LoadModule ssl_module modules/mod_ssl.so

Listen 127.0.0.1:8080
ProxyRequests off

<Proxy *>
                Order deny,allow
                Deny from all
                Allow from 127.0.0.1
</Proxy>

<VirtualHost dev:8080>
                ProxyPass / https://app.somesite.com:5002/
                ProxyPassReverse / https://app.somesitecom:5002/
                ProxyPassReverseCookieDomain app.somesite.com dev
                Header edit Location ^https://dev(:8080)?(.+)$ http://dev$1$2
                Header edit Set-Cookie "(^.+); secure; HttpOnly$" "$1; HttpOnly"
                SSLProxyEngine on
    SSLProxyVerify none
</VirtualHost>

Since I'm a complete novice when it comes to configuring servers, I simply pasted the directives and fortunately enough, the proxy worked. It returns the correct response from the API when I use the browser's address bar to access, for example, http://dev:8080/a/w/currencies.

Unfortunately though, an AJAX request to the same URL (code bellow) makes Chrome give me the XMLHttpRequest cannot load http://dev:8080/a/w/currencies. Origin http://dev is not allowed by Access-Control-Allow-Origin. error.

$.ajax({
    url: "http://dev:8080/a/w/currencies",
    type: "GET",
    dataType: "json",
    data: {

    },
    success: function(data){
        console.log(data);
    }
});

So what must still be done in order for this proxy to work with AJAX? I've been told something about an alias directive, but not specific and clear enough, so it didn't make much sense to my inexperienced brain.

PS: Also, I've been told "the problem is that you're getting the files from dev:80 and ajaxing to dev:8080". Given my inexperience, neither this makes much sense.

you can write ajax with url: http://dev:8080/a/w/currencies your proxy pass has following I see `ProxyPass / https://app.somesite.com:5002/` what is the configuration of apache on app.somesite.com ? Is it listening to 5002 port? — Registered User, Jan 06 '13 at 20:19
ajax has nothing to do or interfere with reverse proxy, it is only your proxy configuration which should work correctly for you. — Registered User, Jan 06 '13 at 20:22
your question is more suitable for server fault if I am not mistaken — Registered User, Jan 06 '13 at 20:23
I might not have been clear enough, sorry about that. To reiterate, if I simply access `dev:8080/a/w/currencies` from the browser address bar, it will correctly return some data in JSON format, from `app.somesite.com:5002/a/w/currencies`. However, when trying the the AJAX call above, I'm being given the '...cannot load http://dev:8080/a/w/currencies. Origin http://dev is not allowed by Access-Control-Allow-Origin' error. So I'm stumped. — Andrei Oniga, Jan 06 '13 at 20:27
hmmm is it possible for you to post the relevant lines of apache access logs this will surely give a clue to your problem because logs of apache store the information that when you , if simply access dev:8080/a/w/currencies from the browser address bar what request reached Apache and what was the request served that will only solve your issue — Registered User, Jan 06 '13 at 21:03
I noticed you are using Wamp if it is installed in C drive you can access the log folder `c:\windows\wamp\logs` location may defer depending upon your installation location and access log is the one which will have last few lines, apache_error log in same folder will also be relevant but I just want to look at access log as what is the request which apache sees when you access dev:8080/a/w/currencies from the browser address bar, without ajax and when you use ajax (I am not a web guy so not sure if what I asked made sense) but that is usual way of debugging url requests in apache or wamp — Registered User, Jan 06 '13 at 21:05
Access-Control-Allow-Origin error 99% of the time meanbs your trying to access one url from another. browsers will throw that error when you attempt "cross-domain" access requests. a web browser will flag the request as cross domain if any of the folling is true: completely different urls (eg google.ca and google.com) different ports your at dev:80 and its sending to dev:8080 or you hit a https site and it posts to non https. its a security thing. — Jacqueline Loriault, Nov 09 '13 at 19:27

score 11 · Answer 1 · edited Jul 18 '20 at 22:00

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.

I appreciate your taking the time to help, but to completely honest, I don't understand. — Andrei Oniga, Jan 06 '13 at 20:32
I wrote the following comment beneath my question: "I might not have been clear enough, sorry about that. To reiterate, if I simply access dev:8080/a/w/currencies from the browser address bar, it will correctly return some data in JSON format, from app.somesite.com:5002/a/w/currencies. However, when trying the the AJAX call above, I'm being given the '...cannot load dev:8080/a/w/currencies. Origin dev is not allowed by Access-Control-Allow-Origin' error. So I'm stumped." — Andrei Oniga, Jan 06 '13 at 20:32
Hmmm I saw your comment actually I am not a web guy so I do not understand ajax, that's why I could not fully answer your question,just show this thread to the guy who gave you vhost configuration and ask him if you disable the https part for some time or redirections ,lets say your application developed is on machine A, so go to machine C and do `http://yourapp` <-- this will issue a request to B (which is reverse proxy) and see if the requests reached B and check logs of A if request reached there if A and B are same your work becomes easier. — Registered User, Jan 06 '13 at 20:51
If you can add screen shots when you access dev:8080/a/w/currencies from the browser address bar when you access in JSON and when with AJAX I think some one else here might comment if it is possible to post the relevant logs can you post the apache access logs of your webserver so that I can see what request from browser reached and what was answered — Registered User, Jan 06 '13 at 20:57

wellumies · Answer 2 · 2013-11-10T20:39:31.963

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

I would replace 'dev' in the hosts file with dev.example.com 127.0.0.1
I would make sure everything coming out of the Apache proxy only refers to dev.example.com no matter from which server it comes
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

score 0 · Answer 3 · answered Dec 09 '16 at 13:43

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 :)

score -1 · Answer 4 · answered Oct 24 '13 at 14:23

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/

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

4 Answers4

Linked