Nginx Reverse Proxy do not load JS and CSS from other server

Question

I have two version of a WebApp, running on two different servers (prod and dev). Prod version is available on exemple.com, and dev version on exemple.com/dev. However, when I set the proxy to load dev version, only the index.html file is loaded, JS and CSS are not loaded.
If I check the request url in devtools, I see that index.html comes from https://exemple.com/dev while main.bundle.js comes from https://exemple.com/

Here is the nginx.conf for prod server

server {
        listen       80 default_server;
        #listen       [::]:80 default_server;
        server_name  _;
        root         /site/app;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location /api/ {
                proxy_pass http://127.0.0.1:3000/api/;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;
                add_header 'Access-Control-Allow-Origin' '*' always;
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
                add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept, authorization' always;
                add_header 'Access-Control-Allow-Credentials' 'true' always;
        }

        location /dev {
                proxy_pass http://10.10.38.18/;
                proxy_http_version 1.1;
                proxy_cache_bypass $http_upgrade;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
        }

And here for dev server:

server {
        listen       80 default_server;
        #listen       [::]:80 default_server;
        server_name  _;
        root         /site/webApp;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
                autoindex on;
        }
        location /api/ {
                proxy_pass http://127.0.0.1:3000/api/;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;
                add_header 'Access-Control-Allow-Origin' '*' always;
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
                add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept, authorization' always;
                add_header 'Access-Control-Allow-Credentials' 'true' always;
        }

I can't see where the url is not correct. My app is made with Angular I only have static html, js and css files in my folders — Guix, May 17 '23 at 13:54
Set the baseurl to `/dev/` https://angular.io/api/common/APP_BASE_HREF — Gerald Schneider, May 17 '23 at 13:55

score 0 · Accepted Answer · answered May 17 '23 at 14:27

While it is possible to configure nginx to rewrite URLs in the content before serving it using sub_filter this puts heavy load on nginx which usually is completely unnecessary.

It is far better to configure the application to generate the correct URLs directly. For Angular this is the APP_BASE_HREF setting.

Nginx Reverse Proxy do not load JS and CSS from other server

1 Answers1