Invalid host error when accessing website from Domain instead of IP

Question

Problem

I am able to access my website hosted on Digital Ocean Droplet from the IP address but not from the namecheap Domain.

When Opening Website using Domain:

Response when Opening Website using Domain:

Context

I have a react + node + postgresql project hosted on a Digital Ocean Droplet which is running two pm2 apps.

• appone is has a react frontend and node backend. This is running in development mode on port 3000 (using npm start command) not from build files from pm2.

• apptwo is simple index.js file running server on port 4000 from pm2.

database_admin@ubuntu-s-1vcpu-2gb-sfo3-01-marketing:~$ pm2 list
┌────┬───────────────────┬─────────────┬─────────┬─────────┬──────────┬────────┬──────┬───────────┬──────────┬──────────┬──────────┬──────────┐
│ id │ name              │ namespace   │ version │ mode    │ pid      │ uptime │ ↺    │status    │ cpu      │ mem      │ user     │ watching │
├────┼───────────────────┼─────────────┼─────────┼─────────┼──────────┼────────┼──────┼───────────┼──────────┼──────────┼──────────┼──────────┤
│ 0  │ appone            │ default     │ 0.39.5  │ fork    │ 1592     │ 76m    │ 0    │ online    │ 0%       │ 33.8mb   │ dat… │ disabled │
│ 1  │ apptwo            │ default     │ 0.4.0   │ fork    │ 2315     │ 74m    │ 0    │ online    │ 0%       │ 63.0mb   │ dat… │ disabled │
└────┴───────────────────┴─────────────┴─────────┴─────────┴──────────┴────────┴──────┴───────────┴──────────┴──────────┴──────────┴──────────┘

Note: below domain means my domain like abc-xyz.io

This is my nginx config file:

server {
        listen 80 default_server;
        listen [::]:80 default_server;

        # SSL configuration
        #
        # listen 443 ssl default_server;
        # listen [::]:443 ssl default_server;

        root /var/www/html;

        # Add index.php to the list if you are using PHP
        index index.html index.htm index.nginx-debian.html;

        # Add Domain Name here
        server_name www.domain.io domain.io;

        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;
         }
}

I've followed the steps here to setup the namecheap configuration.

And videos this and this for setting it up on my Digital Ocean Domain for the Droplet.

Basically added two A type records one for domain.io and one for www.domain.io both of which redirect to my IP.

I've added both my IP and Domain in CORS:

app.use(
  cors({
    origin: ['http://XX.XXX.XXX.XXX', "domain.io", "www.domain.io"],
    methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
    preflightContinue: false,
    credentials: true, 
  })
);

Let me know if any additional details are required.

Answer 1

You are running the project in development mode as suggested, in development mode your application is server using webpack-dev-server.

While developing a React web app in local development mode, you may want to run the dev mode on mobile or quickly share the web app with another person via a public URL for your localhost (e.g. using ngrok or nginx). For security purposes, you cannot externally access your webpack-dev-server.

For production mode it's recommended to build the application as it'll serve files from static build, so you wont get any error.

Since disableHostCheck in config.js won't work. It's depreciated. Unless you are using webpack version < 4.0.0

Still if you want to continue with this, you can try various options to get things working.

1. As mentioned int the Documentation Of webpack you can edit the webpack.config.js located in node_modules/react-scripts/config

devServer: {
    allowedHosts: 'auto' | 'all' | Array[string]
}

here you can specify your host allowedHosts: ['exampleHost.com'],

2. Set the DANGEROUSLY_DISABLE_HOST_CHECK environment variable to true :

• Create a .env file in the root directory (where your package.json file is) of your project.
• Write this in your env file DANGEROUSLY_DISABLE_HOST_CHECK=true

Not recommended, security issues.

3. Using Webpack-CLI npx webpack serve --allowed-hosts exampleHost.com --allowed-hosts exampleHost2.com