How can I have the index.html point to the correct path in the sub-location of a reverse proxy?

Currently the setup for Nginx looks about the following:

upstream docker-frontend-1 {
    server 0.0.0.0:8000;
}

upstream docker-frontend-2 {
    server 0.0.0.0:9000;
}

server {
    listen 443 ssl default_server;
    listen [::]:443 ssl default_server;
    server_name example.com;

    location / {
        // working
    }

    location /other-frontend/ {
        proxy_pass http://docker-frontend-2/other-frontend/;
        proxy_redirect http://docker-frontend-2 http://$lanIP$/other-frontend/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto https;
        proxy_cache_bypass $http_upgrade;
        proxy_connect_timeout 150;
        proxy_send_timeout 100;
        proxy_read_timeout 100s;
    }
}

Within the index.html for the second frontend, which runs inside a docker container, same as the first frontend, I have a referral to a script and stylesheet file as follows:

<link rel="stylesheet" type="text/css" href="/js/test.css" />
<script type="application/javascript" src="/js/test.js"></script>

However, now it tries to access these files on example.com/js/test.css and example.com/js/test.js, while they are located inside a different docker container than the first frontend. This docker container runs under example.com/other-frontend/ as shown in the nginx configuration above.

This gives me the error of

Refused to apply style from 'https://example.com/js/test.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

and

Refused to execute script from 'https://example.com/js/test.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

Which makes sense, since those files are indeed not located on that location, but inside the docker container which I reverse proxy into.

My question is, how could I make it so the stylesheets, scripts and other files are still called inside the appropriate docker container?

P.S. I cannot set up two DNS points for it, so it'll have to work like this and I cannot split anything up, so please leave those comments and suggestions outside of this question.

Solution

Why the problem is :
This issue is happening because you mentioned the file paths of your docker container directly. And when the browser tries to load them, it will use the domain to concatenate with those files.

so if you try to load /js/test.css of docker container, it will use www.example.com ( as usual ) as the base URL to fetch and that's where the failure is.

There are so many answers to this question changing the backend, frontend, nginx configurations etc.

the simplest fix is :
adding <base href="/other-frontend/"> inside the <head> tag of the HTML file you are rendering to /other-frontend/ route.

Note : Add the above-mentioned tag before to those script and link tags where you are importing your js and CSS files