I am trying to set up Nginx to work as a reverse proxy for multiple web apps running on the same server, however I have an issue where relative paths for content (CSS & JS) aren't looking in the correct location and thus returning 404 errors.

My Nginx config is set up like so:

server {
listen 80 default_server;
listen [::]:80 default_server;

location / {
proxy_pass http://localhost:5000;
}

location /app/firstapp/
{
proxy_pass http://localhost:5100/;
}

location /app/secondapp/
{
proxy_pass http://localhost:5200/;
}
}

When I go to localhost/app/firstapp in a browser, the html loads, but then the CSS and JS on that page are referenced with a relative path, so it tries to look at localhost/css/basecss.css rather than localhost/app/firstapp/css/basecss.css.

I can't use sub domains to resolve this, as I need the device this is running on to be accessible through it's own domain, and through a LAN network with it's own hostname.

I looked at http_sub_module, but as the JS on each app with perform AJAX requests with a relative path "/api/...." I can't replace the path in the JS as i'm unused as to where it will be defined.

Also, I am working under the assumption that I don't have control over the content of the two apps, so I can't change the paths to content eg. href=/css to href=http://localhost/app/firstapp/css.

The closest I got was using the $http_referer to redirect requests for the CSS and JS. This worked, however, the CSS file also has a reference to another file with a relative path, and this request uses the CSS file as the referrer, so looking for /app/firstapp in the referral doesn't catch this second request.

I'm struggling as to how to do this implementation, if at all possible? Any advice would be greatly appreciated.