getting net::ERR_CONNECTION_REFUSED error on production

Question

I have deployed my react app which also has a backend. I have started both my front end and backend from my server using npm start command. The front end is working correctly but the backend is not. (Works perfectly from localhost)

The frontend is open from port 3000 and backend from port 9000.

This is my nginx config

    server {
       server_name myservername.com www.myservername.com;
       location / {
         proxy_pass http://localhost:3000;
         proxy_http_version 1.1;
         proxy_set_header Upgrade $http_upgrade;
         proxy_set_header Connection "upgrade";  
       }
    }

server {
   if($host = www.myservername.com){
     return 301 https://$host$request_uri;
   }
   if($host = myservername.com){
     return 301 https://$host$request_uri;
   }
   listen 80 default_server;
   listen [::]:80 default_server;

   server_name myservername.com www.myservername.com;

   return 404;

}

ports that are in use

The error i'm getting in console

POST http://localhost:9000/bot net::ERR_CONNECTION_REFUSED

How can i fix this issue?

The issue is trying to do this fetch

fetch("http://localhost:9000/bot", {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(data)
      }).then(res => res.text())
        .then(res => {
          res = JSON.parse(res);
          this.setState({ apiResponse: res.response, apiIntent: res.intent}, () => {this.setBotMsg()}); 
          console.log(`This is the response: ${res.response}, ${res.intent}`); 
          ;
        });

Answer 1

This will issue a call to your local loopback adapter on your computer port 9000. I don't think this is what you want. Use your server IP or domainname inseat of localhost.

fetch("http://myservername.com:9000/bot", {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(data)
      }).then(res => res.text())
        .then(res => {
          res = JSON.parse(res);
          this.setState({ apiResponse: res.response, apiIntent: res.intent}, () => {this.setBotMsg()}); 
          console.log(`This is the response: ${res.response}, ${res.intent}`); 
          ;
        });

I would use NGINX to proxy the request to your backend and not expose port 9000 directly.

fetch("https://myservername.com/bot", {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(data)
      }).then(res => res.text())
        .then(res => {
          res = JSON.parse(res);
          this.setState({ apiResponse: res.response, apiIntent: res.intent}, () => {this.setBotMsg()}); 
          console.log(`This is the response: ${res.response}, ${res.intent}`); 
          ;
        });

The nginx configuration depends on what you are want to do. Subdomain or location? A subdomain could be something like bot.myserver.com. A location myserver.com/bot.

server {
 listen 443


  .....


  location /bot {
    proxy_pass http://localhost:9000;
    proxy_set_header Host $host;
    ....
  }

}

Additional note: I have updated the configuration to use https from the frontend.