Replace image and javascript absolute paths through proxy_redirect in nginx

Question

I have a scenario as follows.

Nginx is being used as a reverse proxy to a apache server listening at port 8080. nginx is running at port 80. There is a wsgi application which is being run by the apache server.

Now, I have added a proxy_pass to the nginx configuration such that whatever requests come to localhost/ (nginx port is the default port 80) they get redirected to localhost:8080.

Here is an excerpt from the nginx conf file:

    server {
       listen 80;
       proxy_set_header X-Real-IP  $remote_addr;
       proxy_set_header X-Forwarded-For $remote_addr;
       proxy_set_header Host $host;

       location <app_name> {
                proxy_pass http://localhost:8080/
                proxy_redirect http://localhost/ http://localhost:8080/
       }
    }

I have added the proxy redirect to take care of any redirects from the apache server so that any request mapping to http://localhost/<something> gets redirected to http://localhost:8080/<something> because the application's resources are going to be available under port 8080.

Now, the problem here is that the wsgi application generates an html where the image and the javascript location paths are absolute paths like /img/image.png and /js/javascript.js. Now, they are part and parcel of the HTML and do not send any redirect with a complete http:// prefix as such therefore, the server tries to locate the images in the localhost/img directory instead of the localhost:8080/img directory.

A dirty workaround for the same could be to have the /img and /js directories also defined as separate "location" in the server config and a proxy_pass specified to them. But then these directories could be more in number and maintaining the same could potentially become a headache.

Is there a cleaner way of doing this?

This is in reference to fixing the issue in graphite Apache cannot serve graphite-web from URLs other than /

Answer 1

In case where the proxied application (the Graphite app in this case) isn't able to be configured as a "slave" app, it is better to spare a whole subdomain to the application.

Or you may try the ngx_http_sub_module which:

…modifies a response by replacing one specified string by another.

as an example this code will change all the ':/localhost:8080/' to ':/localhost/app_name/':

location <app_name> {
    # ...
    sub_filter ':/localhost:8080/' ':/localhost/app_name/';
}

---

Note that:

This module is not built by default, it should be enabled with the --with-http_sub_module configuration parameter.

But in most package systems nginx is built with all it's optional modules already. Just check if you version has the sub_module built in:

nginx -V | grep sub_module

In my case for homebrew it gives output like this.