NGINX frontend HTTPS server rejects requests to local backend http express server

Question

I have an application that's split into two servers: one is a React application running on port 8080 and the other is an Express server running on 3001. The machine running this application has to run a few other applications as well, so I set up an https reverse proxy using Nginx:

** I disabled some of the proxy options for testing, but please let me know if they should be enabled.

server {
server_name example.com ;
location / {
 proxy_pass http://example.com:8080;
#  proxy_set_header Host $host;
#  proxy_set_header X-SSL-CERT $ssl_client_escaped_cert;
#  proxy_set_header X-Real-IP $remote_addr;
#  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
#  proxy_set_header X-Forwarded-Proto https;
}
listen 443 ssl; # managed by Certbot
   ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem; # managed by Certbot
   ssl_certificate_key /etc/letsencrypt/live/example.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
}

This works as intended; I can reach the site and it is secured, however requests made to my backend server, which is running on http://localhost:3001, is blocked because it's attempting to load mixed active content. So I adjusted to client to make requests to https://localhost:3001, and then generated a self-signed certificate for the Express server and set it up to use https, and this is where I hit a wall. Because this certificate is self-signed, it won't be trusted unless explicitly done so by someone, which is unreasonable for the user audience. From searching around it seems that you can't use certbot for localhost(understandable) so I'm not quite sure where to go from here. My assumption about the proxy_pass field was that requests to the backend would come from http, but from error messages in the browser this doesn't seem to be the case. Is it really necessary that two servers running on the same machine need to use https to communicate?

This question: Proxy HTTPS requests to a HTTP backend with NGINX almost matches what I'm attempting to do, except that I'm only using Nginx to serve the client; requests to the backend are handled through a combination of Apollo Client/Server, so Nginx is ignorant of these requests. Is there anything obvious I'm missing here, or some other configuration options to try?

Express server should have a setting for root URL or similar, which tells what is the outside visible URL for your server. Set that URL to `www.example.com`. After that the application should use proper URLs for everything. — Tero Kilkanen, Oct 28 '20 at 23:39

Charlie Monnone · Answer 1 · 2020-10-29T01:47:09.080

So I managed to fix my issue after thinking about Tero Kilkanen's answer. Express allows you to set the hostname in app.listen(PORT, HOST), so I set HOST to example.com. My backend uses graphql, so now my backend url is: example.com:3001/graphql. Beforehand, my client's connection to the backend was defined as localhost:3001/graphql, so I modified it to connect to example.com/graphql, then in my Nginx configuration, created a new location for exmaple.com's server:

 location /graphql {
  proxy_pass http://130.245.12.107:3001/graphql;                                                                       $  proxy_set_header X-SSL-CERT $ssl_client_escaped_cert;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  proxy_set_header X-Forwarded-Proto https;
 }

and now my requests to the backend have https.

NGINX frontend HTTPS server rejects requests to local backend http express server

1 Answers1