reverse proxy does not load webpage data

[Francis Daly]

On Mon, Feb 01, 2021 at 03:11:57AM -0500, petrg wrote:

Hi there,

> If I call the webpage from a connected PC (PC-browser) everything is working
> fine.
> But now I’d like to run a reverse-proxy (PC-proxy) in between. 
> So the PC-browser does not see the PC-device anymore.

> This structure of a reverse proxy looks very basic for me. But I don’t get
> it run.
> 
> My configuration:
> 
> PC-device
>    /path/index.html
>       <img src="/images/logo.jpg" …>
> 
>    nginx.conf
>       location /images/
>          absolute_image_path
> 
> PC-proxy
>    nginx.conf
>       location /device/
>          proxy_pass 192.168.5.1/path
>          index.html
> 
> PC-browser
>    url: 192.168.1.1/device/index.html
> 
> => index.html will be loaded correctly from PC-device, because of the
> proxy-pass configuration
> => but the Logo-image, that will be loaded by the index.html, will not be
> found.

> So, how does a reverse-proxy load data for a webpage ?

There is no magic; it does what you configure it to do. The browser makes
a request to nginx; nginx handles that according to its config. Every
request is independent.

> How should nginx(PC-proxy) know, where to find the image-file
> /images/logo.jpg that is asked for by the webpage ? 

You need to configure your nginx to do what you want it to do.

PC-proxy needs to know what request to make to PC-Device, when PC-Browser
asks PC-Proxy for /images/logo.jpg.

If you look at the PC-Proxy nginx logs, they should show what that nginx
saw, and what it did.

> Or is it necessary that all data of the webpage has to be relative to the
> starting point “192.168.1.1/device/index.html” ?
> I am not sure if my misunderstanding is related to the webpage structure or
> to the reverse-proxy function.

Possibly both? I will try to explain.

Your actual html page is on PC-device, in the file
/something/path/index.html.

It can include any or all of:

<img src="one.jpg">
<img src="/path/two.jpg">
<img src="http://PC-device/path/three.jpg">
<img src="http://192.168.5.1/path/four.jpg">

to refer to things in the same directory, or

<img src="/otherpath/five.jpg">

to refer to a thing in another directory.

When the browser talks to PC-Device directly and asks for
http://PC-device/path/index.html, it gets back the content, and then
it tries to make five new requests, for http://PC-device/path/one.jpg,
http://PC-device/path/two.jpg, http://PC-device/path/three.jpg, 
http://192.168.5.1/path/four.jpg, and
http://PC-device/otherpath/five.jpg. All will probably work.

When the browser talks to PC-proxy and asks for
http://192.168.1.1/device/index.html it gets the same html back,
and it makes five new requests for http://192.168.1.1/device/one.jpg,
http://192.168.1.1/path/two.jpg, http://PC-device/path/three.jpg, 
http://192.168.5.1/path/four.jpg, and
http://192.168.1.1/otherpath/five.jpg.

The first will work because of your nginx config; the second and fifth
will not work because you have not configured your nginx to make it
work; and the other two will (probably) not go to nginx on PC-proxy,
so no config there can help you.


In your case, you are doing something like "five.jpg".

So: you must either change the PC-device layout and html so that
everything is below /somewhere/path *and* all links are relative (i.e. do
not start with http: or with /); or change your nginx config so that
you also have something like

  location /otherpath/ { proxy_pass http://PC-Device/images/; }
  location /path/ { proxy_pass http://PC-Device/path/; }

(Although that second one would usually be written

  location /path/ { proxy_pass http://PC-Device; }

-- see the docs for proxy_pass at http://nginx.org/r/proxy_path for details.)

And you will also need to change the PC-device html so that all links
are at least site-relative (i.e. do not start "http:"); or if the links
do use "http:", they use the name that the world should see (something
that resolves to PC-Proxy, not something that resolves to PC-Device).


In general:

* you reverse-proxy to something that you control
* the thing you are reverse-proxying, needs not to fight being
reverse-proxied
* it is often simplest if you reverse-proxy a thing at the same point in
the url-hierarchy that it thinks it is installed at. That is: if your
content is all below http://PC-Device/path/, it is probably simplest
to reverse-proxy that at http://PC-Proxy/path/. It is not compulsory;
but it would have made "two.jpg" Just Work in the example above.

Good luck with it,

	f
-- 
Francis Daly        francis at daoine.org