How to handle relative urls correctly with a reverse proxy

I have a reverse proxy setup as follows in Apache:

Server A with address www.example.com/folder is the reverse proxy server.

It maps to: Server B with address test.madeupurl.com

This kind of works. But the problem I have is, on www.example.com/folder, all of the relative links are of the forms www.example.com/css/examplefilename.css rather than www.example.com/folder/css/examplefilename.css

How do I fix this?

So far my reverse proxy has this on Server A (www.example.com):

<Location /folder>
    ProxyPass  http://test.madeupurl.com
    ProxyPassReverse http://test.madeupurl.com
</Location>

Solution 1:

The Apache ProxyPassRewrite does not rewrite the response bodies received from http://test.example.com, only headers (like redirects to a 404 page and such).

A number of alternatives:

One) Rewrite the internal app to use relative paths instead of absolute. i.e. ../css/style.css instead of /css/style.css

Two) Redeploy the internal app in a the same subdirectory /folder rather than in the root of test.example.com.

Three) One and two are often unlikely to happen... If you're lucky the internal app only uses two or three subdirectories and those are unused on your main site, simply write a bunch of ProxyPass lines:

# Expose Internal App to the internet.
ProxyPass /externalpath/  http://test.example.com/
ProxyPassReverse /externalpath/  http://test.example.com/
# Internal app uses a bunch of absolute paths. 
ProxyPass /css/  http://test.example.com/css/
ProxyPassReverse /css/  http://test.example.com/css/
ProxyPass /icons/  http://test.example.com/icons/
ProxyPassReverse /icons/  http://test.example.com/icons/

Four) Create a separate subdomain for the internal app and simply reverse proxy everything:

<VirtualHost *:80>
   ServerName app.example.com/
   # Expose Internal App to the internet.
   ProxyPass /  http://test.internal.example.com/
   ProxyPassReverse /  http://test.internal.example.com/
</VirtualHost>

Five) Sometimes developers are completely clueless and have their applications not only generate absolute URL's but even include the hostname part in their URL's and the resulting HTML code looks like this: <img src=http://test.example.com/icons/logo.png>.

A) You can use combo solution of a split horizon DNS and scenario 4. Both internal and external users use the test.example.com, but your internal DNS points directly to the ip-address of test.example.com's server. For external users the public record for test.example.com points to the ip-address of your public webserver www.example.com and you can then use solution 4.

B) You can actually get apache to to not only proxy requests to test.example.com, but also rewrite the response body before it will be transmitted to your users. (Normally a proxy only rewrites HTTP headers/responses). mod_substitute in apache 2.2. I haven't tested if it stacks well with mod_proxy, but maybe the following works:

<Location /folder/>
  ProxyPass http://test.example.com/
  ProxyPassReverse http://test.example.com/ 
  AddOutputFilterByType SUBSTITUTE text/html
  Substitute "s|test.example.com/|www.example.com/folder/|i" 
</Location>

Solution 2:

As a complement to HBruijn's answer, if you opt for solution (3) "ProxyPass", you may have to also use mod_proxy_html to rewrite some URLs in your HTML pages.

cf. How to handle relative urls correctly with a reverse proxy for some examples.

As an applied example, here is how you can configure Apache using the ProxyHTMLURLMap rule to forward everything at your-domain-name.com/pad to your Etherpad instance running locally on port 9001:

<Location /pad>
  ProxyPass http://localhost:9001 retry=0
  # retry=0 => avoid 503's when restarting etherpad-lite
  ProxyPassReverse http://localhost:9001
  SetOutputFilter proxy-html
  ProxyHTMLURLMap http://localhost:9001
</Location>
RewriteRule ^/pad$ /pad/ [R]

Solution 3:

You can use following way to make a reverse proxy:
1. Install mod_proxy_html

    yum install mod_proxy_html

2. Load mod_proxy_html module

   LoadModule proxy_html_module modules/mod_proxy_html.so
   

3. And use following setting

   ProxyRequests off  
   ProxyPass /folder/  http://test.madeupurl.com  
   ProxyHTMLURLMap http://test.madeupurl.com  /folder  
   
   <Location /folder/>  
       ProxyPassReverse /  
       ProxyHTMLEnable On  
       ProxyHTMLURLMap  /  /folder/  
       RequestHeader    unset  Accept-Encoding  
   </Location>  
   

Hope this help.