Can't click push button

[c-informatique]

Hello,

I have an issue with clicking the button "push it!".
I use a reverse proxy with nginx, and i want to make it work like this : http://192.168.X.X/pwpush

i first had issue with the redirection, so i used sub_filter to redirect balises, (i know it's not optimal, but it works for everything except the push button :/ )

    location /pwpush {

            proxy_pass http://192.168.X.Y:5100/;

            proxy_redirect default;
            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;
            sub_filter_types text/html;

            sub_filter_once off;
            sub_filter 'href="/' 'href="/pwpush/';
            sub_filter 'src="/' 'src="/pwpush/';
            sub_filter 'action="/' 'action="/pwpush/';
            sub_filter 'form action="/' 'form action="/pwpush/';
            sub_filter 'script src="/' 'script src="/pwpush/';
            sub_filter 'link href="/' 'link href="/pwpush/';
            sub_filter 'data-form-target="' 'data-form-target="/pwpush/';
            sub_filter '<form ' '<form action="/pwpush" ';
    }

I am pretty sure there is an easier way to do it, but I'm not an expert, that's why i'm here ..

I don't have this problem when i try to do it with location / {

If anyone can help me, would be very helpful :)

[pglombardo]

Hi @c-informatique! I'll tell you the options and some history but tldr; it's better to use subdomains & multiple server blocks if possible. Running the application in a subfolder doesn't work well.

The application supports the environment variable PWP__RELATIVE_ROOT to run the application in a subfolder (docs). All links and forms will be created with the right paths. The problem in #905 points out that assets (images, files, JS) don't load correctly.

So my advice to hopefully save you the headache is to use Host Headers (aka subdomains). Here would be an example nginx config for "pwpush" and "anotherapp":

# Configuration for pwpush.example.com
server {
    listen 80;
    server_name pwpush.example.com;

    # Proxy pass to the pwpush backend running on port 5100
    location / {
        proxy_pass http://10.0.0.25:5100;
        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;
    }
}

# Configuration for anotherapp.example.com
server {
    listen 80;
    server_name anotherapp.example.com;

    # Proxy pass to the other application running on port 80
    location / {
        proxy_pass http://10.0.0.25:80;
        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;
    }
}

If you still want to go the subfolder route, please post the output in the browser javascript console. I suspect there is a JS issue for the Push It! button.

[c-informatique]

Hello, and thanks for the very fast reply.

Unfortunatly, I only have 1 Public IP, so i think it's not going to work ? so the only way i can split my multiples web apps is with using subfolders

when i just load the page, i have this :
La ressource à l’adresse « http://192.168.X.X/assets/application-b899785ab7e82b0b8db128c4a68b589fbc83689c931437e358d49c7676ac7ce0.css » a été bloquée en raison d’un type MIME (« text/html ») incorrect (X-Content-Type-Options: nosniff).

It says that the ressources have been blocked because of a MIME Type

When i click on push :

XHR POST
http://192.168.X.X/pwpush
[HTTP/1.1 404 Not Found 22ms]

GET
http://192.168.X.X/assets/application-b899785ab7e82b0b8db128c4a68b589fbc83689c931437e358d49c7676ac7ce0.css
État : 404 Not Found
Version : HTTP/1.1
Transfert : 812 o (taille 0 o)
Politique de référent : strict-origin-when-cross-origin
Priorité de la requête : Highest
Résolution DNS : Système

Seems like he is searching the css on http://192.168.X.X/assets/
instead of http://192.168.X.X/pwpush/assets/

I forgot to say that i first tried with changing the PWP__RELATIVE_ROOT variable, wich is a solution that works, but i loose the css using this solution, maybe this is a known isssue and easy to fix ?

Thanks for your help

[pglombardo]

Unfortunatly, I only have 1 Public IP, so i think it's not going to work ? so the only way i can split my multiples web apps is with using subfolders

Just for the record, you can run 100s of different websites on a single IP using Apache VirtualHosts or multiple nginx server blocks. This is really the best way to do this.

XHR POST
http://192.168.x.x/pwpush
[HTTP/1.1 404 Not Found 22ms]

This should be a POST to http://192.168.x.x/pwpush/p

GET http://192.168.x.x/assets/application-b899785ab7e82b0b8db128c4a68b589fbc83689c931437e358d49c7676ac7ce0.css

The problem with /assets/ is in #905 and unfortunately isn't easy to fix currently. This URL comes from the HTML page headers. You might be able to do request rewriting but it may be a hassle.

Unfortunately these are the difficult problems when running in a subfolder. This will also happen with file uploads/downloads. :-/

[c-informatique]

Knowledge issue from my part (first time creating a reverse proxy), i used subdomains solution and everything works fine with only 1 public IP.

Thank you very much for your help, and thanks for your great web application :)

[pglombardo]

That's excellent and great to hear. Let me know if you hit any other issues...