NGINX + ExpressJS-HTML中URL的反向代理

Question

I have a NodeJS + ExpressJS app running on port 3000 which has a route:

router.get('/getHello', function(req, res) {
    res.send('Hello, world!');
});

and a HTML page which does a GET on this route

<a href="/getHello">
    <input type="button" value="Visit Helo World page" />
</a>

This standalone app works as intended. It displays Hello, world! when the button is pressed.

Now, here's the problem:

I have setup a reverse proxy on this app using nginx . Here's the config file from sites-available (linked with sites-enabled )

server {
    listen 80;
    server_name localhost;

    location /routetest/ {
        proxy_pass http://127.0.0.1:3000/;
        proxy_http_version 1.1;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-NginX-Proxy true;
        proxy_set_header Host $host;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_redirect off;
        proxy_cache_bypass $http_upgrade;
    }
}

The app opens fine when I visit http://localhost/routetest but when I click on the button, it opens http://localhost/getHello whereas I wanted it to open http://localhost/routetest/getHello . Since http://localhost/getHello is not defined, I end up with a 404. (On the other hand, http://localhost/routetest/getHello correctly returns the Hello, world message)

Now, my question is:

My frontend is written with / as the base path (to make all GET and POST requests), for example <a href="/getHello"> and I feel manually appending /routetest/ before all URLs in my HTML not a good practice (since I may want to change this base path later and then I'll have to update it everywhere). So, is there a way for NGINX or some express middleware to add /routetest/ for URLs that are written with / as the base path, without having to change it in my HTML manually?

Answer 1

By a long way the easiest solution is to use relative paths without the leading / if that's an option that's available to you.

Rewriting URLs in the response is somewhere between tricky and impossible in the general case. If you think you can successfully identify the relevant URLs in your content you might be able to use nginx's catchily titled ngx_http_sub_module :

http://nginx.org/en/docs/http/ngx_http_sub_module.html

There are various Express middleware implementations that do a similar thing but I couldn't find one that looked reliable enough to recommend. The basic approach would be similar to the compression middleware if you fancy giving it a go yourself. Again it's quite difficult in general but depending on the specifics of how you serve up your HTML it might not be too bad.