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

L

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
Click to expand...
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.
 
from my point of view I'd expect a proxy-configuration to the backend-nodejs-server in your nginx-config.
 
@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.
 
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...
 
@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:
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.
 
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...
 
You must log in or register to reply here.
Back
Top