Reverse proxy in nginx at location /foo

Question

I have an app with a frontend written in Angular on server 1 made accessible in the local network through apache (accessed through ip on port 81: http://192.168.123.123:81).

Now, for various reasons I have to reverse proxy that site using nginx on server 1.

If I make the proxy at "location /" everything works as it should:

   listen 80;

   server_name example.com;

    location / {
        proxy_pass http://192.168.123.123:81/;
        proxy_set_header Host $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 $scheme;
    }

The thing is that I must have the site at example.com/foo, so I simply changed the location:

location /foo/ {
        proxy_pass http://192.168.123.123:81/;
        proxy_set_header Host $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 $scheme;
    }

I doesn't work. By doing this, I get a blank page in the browser and a 404 for every js file. I then read that nginx treats location directives differently when using variables so I searched for solutions. The only thing I found was using a rewrite to remove "foo" from the uri sent the other server:

rewrite ^/foo(.*)$ $1 break;

Again, it doesn't work. I also tried playing with the slashes from the location, rewrite and the proxy_pass url, but without success.

I really don't know what to try anymore. Please bear with me, I'm still a begginner.

Duplicate to https://stackoverflow.com/questions/66286042/nginx-reverse-proxy-for-angular-apps — Lex Li, Aug 07 '22 at 17:25
Does this answer your question? [How to set up Nginx as a caching reverse proxy?](https://serverfault.com/questions/30705/how-to-set-up-nginx-as-a-caching-reverse-proxy) — djdomi, Aug 07 '22 at 17:47

score 0 · Answer 1 · answered Aug 08 '22 at 17:18

After more trial and error, I found out that some way or another, my app did not like how nginx sent the requests through the proxy and got confused of where exactly the various js files and my assets folder are.

I kind of solved the issue by using a subfilter inside location /foo/ to change a href in the index.html:

sub_filter 'href="/' 'href="/foo/';
sub_filter_once off;

Also, I added a location block that does another reverse prox for the assets folder:

location /foo/ {
        proxy_pass http://192.168.123.123:81/assets/;
}

While this technically works, I really did not like the solution. Thus, in the end, I settled on just using a subdomain (foo.example.com) for the sake of simplicity and avoiding more "hacky" solutions. I will take a look at the post about using nginx as a caching reverse proxy though. It seems interesting.

I think the problem is basically that using a `proxy_pass` directive won't rewrite HTML code and therefor pointers using relative (or absolute) URL's such as for instance `src="/assets/script.jss"` won't magically change to `src="/foo/assets/script.jss".` - `sub_filter`is definitely an approach but also consider: https://serverfault.com/a/932636/37681 — HBruijn, Aug 09 '22 at 12:28

Reverse proxy in nginx at location /foo

1 Answers1