Question

How to connect securely between Node and Vue on one Droplet?

Posted March 11, 2020 135 views
NginxNode.jsAPI

I set up SSL with Let’s Encrypt and it works as it should. On my droplet there is Nginx as reverse proxy and forwards the request to my frontend on port 3000 –> it works!. But my frontend does fetch data from my backend with Node on port 8080. My domain is secured and uses the HTTPS protocol but in my private network (frontend + backend) I cannot establish a communcation between them. I got a Chrome Dev Tools error:

GET http://127.0.0.1:8080/api/videos/all net::ERR_CONNECTION_REFUSED

I assume there is a secure connection expected but I don’t know how to set it up. I tried to use https://127.0.0.1:8080 but it does not work as well.

Nginx-config:

server {

        root /var/www/html;

        index index.html index.htm index.nginx-debian.html;

        server_name my-domain.com www.my-domain.com;

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

    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/my-domain.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/my-domain.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot


}


server {
    if ($host = www.my-domain.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    if ($host = my-domain.com) {
        return 301 https://$host$request_uri;
    } # ma
}

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

×
2 answers

Hi there @Effection,

What I could suggest here is trying to set up another reverse proxy for your API as well, so basically just add one more location directive in your Nginx server block:

...
        location /api {
                proxy_pass http://localhost:8080;
                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;
        }
...

Then you can use my-domain.com/api in your VueJS calls to do the API requests.

Let me know how it goes!
Regards,
Bobby

Hey, many thanks for your suggestion. It works like this. The frontend does receive the data given by the backend, great!

But there’s one more issue. It’s more specific concerning my SSR app but you might have an idea.

When I navigate through my page it just works fine. Lets say the endpoint “http://localhost:8080/api/courses/all” gets called. I receive all the data as I said. But when I hard refresh the page where the endpoint is hit, the frontend establishes a connection to “http:///api/courses/all”. So three slashes and no domain is called.

I already had the exact reverse scenario when I changed the axios (http lib) base url from “/api” to “http://localhost:8080/api

I wonder how I can fix the issue. Im using Nuxt (analogy to React’s Next).

Thanks!

Submit an Answer