nginx ssl + react + node, response is timeout

Question

I have made a react app, it is working fine for http protocol. now I want to enable https for this site. My node is listening on port 5000 and react working on port 3000. but I can't send commands to port 5000 where node is listening and I get time out error. This is my nginx default configuration file in sites-enabled folder.

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

    root /var/www/html/client/public;
    index index.html index.htm index.nginx-debian.html;
    server_name www.my_domain.co my_domain.co; # managed by Certbot

    location / {
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain charset=UTF-8';
            add_header 'Content-Length' 0;
            return 204;
        }
        if ($request_method = 'POST') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
        }
        if ($request_method = 'GET') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
        }       
        proxy_pass http://localhost:3000;
    }
    
    location /uploads {
        proxy_pass http://localhost:5000;
    }
    location /api {
        proxy_pass http://localhost:5000;
    }
    
    ssl_certificate /etc/letsencrypt/live/my_domain.co/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/my_domain.co/privkey.pem; # managed by Certbot
}

what is the problem? I'm confused.

some proxy headers are missing to maintain the same session from your reactapp to the backend server, this might be helpful https://stackoverflow.com/a/44425690/4257943 — Orenico, Jul 11 '21 at 08:42
It is unclear for me what you are doing. You show a nginx config which listens on port 80 and 443, not on port 5000. It instead forwards requests to localhost ports 3000 and 5000. It is unclear what exactly you are trying and from what system and where exactly you get the error. But for example something like `https://my_domain.co:5000` is not supposed to work based on your config. — Steffen Ullrich, Jul 11 '21 at 12:05
@SteffenUllrich , yes that is exactly what I want to achieve. React app communicates with backend node on port 5000... how can I achieve that? — vahid mokhtarzade, Jul 11 '21 at 15:31
Again, it is unclear what you are doing. *" but I can't send commands to port 5000 where node is listening and I get time out error."* - Send command from where? To where? How exactly do you send these commands, i.e. tool, exact URL. What is the exact error message you get? — Steffen Ullrich, Jul 11 '21 at 15:39
This is the code sending data to backend node from react `axios.post(apiAddress + `/files`, { uuid: fuid, extension: file.type, name: file.name })` and this is the apiAdress `apiAddress: "https://my-domain.co:5000/api"` — vahid mokhtarzade, Jul 11 '21 at 16:25

score 0 · Accepted Answer · answered Jul 16 '21 at 08:58

0

For those who got similar problem. I figured out that I can't send requests to some specific port (mine was port 5000) over https, instead I used nginx proxy-pass to send over requests made for /api to pass to localhost:5000 and now I got it working.

answered Jul 16 '21 at 08:58

vahid mokhtarzade

15
1
7

nginx ssl + react + node, response is timeout

1 Answers1