By Effection
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
}
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
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!
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
Full documentation for every DigitalOcean product.
The Wave has everything you need to know about building a business, from raising funding to marketing your product.
Stay up to date by signing up for DigitalOcean’s Infrastructure as a Newsletter.
New accounts only. By submitting your email you agree to our Privacy Policy
Scale up as you grow — whether you're running one virtual machine or ten thousand.
Sign up and get $200 in credit for your first 60 days with DigitalOcean.*
*This promotional offer applies to new accounts only.