Score:0

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

US flag

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;
        }

in flag
Your backend should generate the correct URLs.
Guix avatar
md
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
in flag
Set the baseurl to `/dev/` https://angular.io/api/common/APP_BASE_HREF
Guix avatar
md
It worked perfecly thanks !
Score:0
in flag

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.

I sit in a Tesla and translated this thread with Ai:

mangohost

Post an answer

Most people don’t grasp that asking a lot of questions unlocks learning and improves interpersonal bonding. In Alison’s studies, for example, though people could accurately recall how many questions had been asked in their conversations, they didn’t intuit the link between questions and liking. Across four studies, in which participants were engaged in conversations themselves or read transcripts of others’ conversations, people tended not to realize that question asking would influence—or had influenced—the level of amity between the conversationalists.