Cannot access behind reverse proxy

[overcuriousity]

Describe the bug I am unable to access the perplexica behind a nginx reverse proxy. The frontend loads, but not the backend (infinite loading). The browser produces the errors:

Blocked loading mixed active content “http://192.168.178.103:3001/api/models” 
Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource.
    NextJS 11
453-17320b85d95d59ad.js:1:28084
    ed NextJS
    AsyncFunctionThrow self-hosted:857
    NextJS 30

which is only the case if I access it via the domain name (which is locally resolved on my network) - if I access it via the IP directly, it works.

I tried to troubleshoot, it seems to have to do with CORS preventing mixed access to the endpoints. Tried both the docker version as well as the nodeJS solution.

[overcuriousity]

Update: I fixed it. In the env variables, configure

NEXT_PUBLIC_API_URL=https://<your_domain>
NEXT_PUBLIC_WS_URL=wss://<your_domain>/ws 

and in the local nginx configuration, configure

server {
    listen 80;
    server_name <your_local_server_ip>;

    location / {
        proxy_pass http://<your_local_server_ip>:3000;
        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;
    }

    location /api {
        proxy_pass http://<your_local_server_ip>:3001/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;
    }

    location /ws {
        proxy_pass http://<your_local_server_ip>:3001;
        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;
    }
}

However, this could be made clear in the Documentation or streamlined in the application. Configuring it was a pain.

Note that this works for my network, where a network-wide reverse proxy handles all SSL/TLS at the single point of entry. The nginx config was also configured with the additional custom locations /ws and /api.

[overcuriousity]

reopened the issue in the hope the maintainer sees it. Keep up the great work of this exceptional project!

[ItzCrazyKns]

Hi, you only had to serve the backend of HTTPS. Yes, we can add it in the documentation but we cannot provide support for that (if someone faces an issue while doing so, they need to handle it themselves as if we start watching all these domain/networking errors then the real problems will be ignored). If you'd like, you can make a pull request to add this point in the networking docs.

[overcuriousity]

Thats a good idea, I will do that.

[overcuriousity]

Could not reproduce, its still faulty and inconsitant. I think there should be a sophisticated solution configurable on the application layer. I tried to make a PR but I am not familiar enough with typescript and npm.

[getteq]

Update: I fixed it. In the env variables, configure

NEXT_PUBLIC_API_URL=https://<your_domain>
NEXT_PUBLIC_WS_URL=wss://<your_domain>/ws 

and in the local nginx configuration, configure

server {
    listen 80;
    server_name <your_local_server_ip>;

    location / {
        proxy_pass http://<your_local_server_ip>:3000;
        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;
    }

    location /api {
        proxy_pass http://<your_local_server_ip>:3001/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;
    }

    location /ws {
        proxy_pass http://<your_local_server_ip>:3001;
        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;
    }
}

However, this could be made clear in the Documentation or streamlined in the application. Configuring it was a pain.

Note that this works for my network, where a network-wide reverse proxy handles all SSL/TLS at the single point of entry. The nginx config was also configured with the additional custom locations /ws and /api.

Today I tried this method and there is one tiny error, NEXT_PUBLIC_API_URL=https:///api NEXT_PUBLIC_WS_URL=wss:///ws is correct, not NEXT_PUBLIC_API_URL=https:// NEXT_PUBLIC_WS_URL=wss:///ws If you try to using this method use NEXT_PUBLIC_API_URL=https:///api NEXT_PUBLIC_WS_URL=wss:///ws

[overcuriousity]

Update: I fixed it. In the env variables, configure

NEXT_PUBLIC_API_URL=https://<your_domain>
NEXT_PUBLIC_WS_URL=wss://<your_domain>/ws 

and in the local nginx configuration, configure

server {
    listen 80;
    server_name <your_local_server_ip>;

    location / {
        proxy_pass http://<your_local_server_ip>:3000;
        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;
    }

    location /api {
        proxy_pass http://<your_local_server_ip>:3001/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;
    }

    location /ws {
        proxy_pass http://<your_local_server_ip>:3001;
        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;
    }
}

However, this could be made clear in the Documentation or streamlined in the application. Configuring it was a pain. Note that this works for my network, where a network-wide reverse proxy handles all SSL/TLS at the single point of entry. The nginx config was also configured with the additional custom locations /ws and /api.

Today I tried this method and there is one tiny error, NEXT_PUBLIC_API_URL=https:///api NEXT_PUBLIC_WS_URL=wss:///ws is correct, not NEXT_PUBLIC_API_URL=https:// NEXT_PUBLIC_WS_URL=wss:///ws If you try to using this method use NEXT_PUBLIC_API_URL=https:///api NEXT_PUBLIC_WS_URL=wss:///ws

Ah, thanks! This is very helpful, as I struggled to reproduce in the meantime, but now I know why.

[satonotdead]

I can't get it working and tried a lot. Using a different domain on api, using the original subdomain of the app.

I was need to change the localhosts ports, if that can be a hardcoded issue or something else.

What can be wrong in order to use api, ws and front behind Nginx? Why is so hard to enable this way?

I have 30+ apps running without issues, with very similar architectures and really want to run Perplexica.

Thanks!