Frontend (nginx hosted) can't connect to backend (expressJS)

lpark

New Member
I'm hosting a vueJS SPA on a nginx server over https (self-signed). But when making requests to the backend I'm getting an
ERR_CONNECTION_REFUSED
My nginx config looks like:

Code:
server {
        listen 80 default_server;
        listen [::]:80 default_server;
        server_name exampleVue.com;
        return 302 https://$server_name$request_uri;
}


server{
        # SSL configuration
        listen 443 ssl default_server;
        listen [::]:443 ssl default_server;


        include snippets/self-signed.conf;
        include snippets/ssl-params.conf;


        root /var/www/client/pvapp-client/dist;
        index index.html index.htm;


        location / {
            root /var/www/client/pvapp-client/dist;
            try_files $uri $uri/ /index.html;
        }


        error_log  /var/log/nginx/vue-app-error.log;
        access_log /var/log/nginx/vue-app-access.log;
}

Is there something I have to configure to make it work?
Without the nginx and just self-hosting vue over https with npm run serve, it works fine.
 

marce

Well-Known Member
from my point of view I'd expect a proxy-configuration to the backend-nodejs-server in your nginx-config.
 

lpark

New Member
@marce I configured the proxy pass as:
Code:
root /var/www/client/pvapp-client/dist;
            try_files $uri $uri/ /index.html;
            proxy_pass https://localhost:60702;
        }

So https://localhost:60702 is my express backend. Now when calling the page it redirects me to the backend and obviously displays "cannot get" cause my frontend ain't displayed anymore.
 

marce

Well-Known Member
at this point it's hard to help becaue we don't know anything 'bout the internals of your project.

"best-practice" is to separate backend and frontent-access by a subfolder (https://project/backend) or a ded. hostname (https://backend.project) so you can decide which request should go to the frontend and wich to the backend...
 

lpark

New Member
@marce I separated my frontend and backend with subfolders.

project
I---backend->express
I---frontend->vue

Express is running (with https) with "node app.js" on localhost with port 60702
And currently vue is running with nginx on with the above specification.

The request I'm trying to make in this case is a POST request to the backend like:

Code:
const apiClient = axios.create({
  baseURL: `https://inf-education-47.umwelt-campus.de:60702`,
  withCredentials: false, // This is the default
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json'
  }
})

Hope this helps. :)
 
Last edited:

lpark

New Member
So I changed it like this, cleared the browser chache and it sadly still doen's work (getting the old error)

Code:
location / {
            root /var/www/client/pvapp-client/dist;
            try_files $uri $uri/ /index.html;
        }


        location /backend/pvapp-server/ {
            proxy_pass https://localhost:60702;
        }

Also tried to set the location like "location /var/www/backend/pvapp-server" to be more precise.
 

Joe User

Zentrum der Macht
Deine baseURL enthält den Port und somit triggert der proxy_pass nicht...
Auch passen der baseURL ohne Pfad nicht zum location/proxy_pass mit Pfad...

Alles wieder zurück auf Anfang und die Debuglevel in der WebApp und in NGinx hochschrauben...
 
Top