Reverse proxy serving html linked content as 404

Question

I've set up this reverse proxy to route a simple web page served on a port (say 61185). Instead of querying example.net:61185, i'd like to have the same behavior with example.net/listing

Here's the config:

server {
  listen 80;
  server_name example.net;
  location /listing {
    proxy_pass http://127.0.0.1:61185/;
  }
}

The html loads fine, but when fetching the css linked inside it I get a 404. I noticed the URI is http://example.net/styling.css, how can I make it so that the css is also fetched with the /listing suffix?

Then add another `location` section to forward `.css` requests. — Lex Li, Jan 10 '23 at 03:51
I simplified the example, isn't there a way to do that for all linked content in the page? Ideally I'd like this to be extensible to other more complex pages. — Deux Sorbets, Jan 10 '23 at 10:42
If you are writing the web app/page, please go to Stack Overflow and learn how to design from day 1 to work with reverse proxy. Then you don’t need too many rules. — Lex Li, Jan 10 '23 at 15:39

score 0 · Answer 1 · answered Jan 15 '23 at 08:52

The issue you are experiencing is that the URLs for the linked CSS resources in the HTML page are not being rewritten to include the /listing prefix, so the browser is requesting them from the wrong location. Try this block of code:

server {
  listen 80;
  server_name example.net;
  location /listing {
    proxy_pass http://127.0.0.1:61185/listing;
    proxy_redirect /listing /;
  }
}

Reverse proxy serving html linked content as 404

1 Answers1