Localhost NGINX server returns 403 Forbidden, but works on host machine

I have a NGINX setup serving a React app and an API on my local network, with a valid SSL certificate generated by letsencrypt.

My domain is provided by domain.com, I'm going to refer to it as mydomain.com

My App works perfectly on the host machine (my laptop at the moment), but when I try to open it on mobile (which is connected to the same network), it returns a 403 Forbidden error.

Is there a mistake in my configuration files somewhere or could you tell me what could cause this?

/etc/nginx/sites-enabled/mydomain.com:

server {

    server_name mydomain.com;
    root /home/build;
    index index.html index.htm;

    listen 443 ssl;

    ssl_certificate /etc/letsencrypt/live/mydomain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/mydomain.com/privkey.pem;

    location /api {
        proxy_pass http://localhost:5000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header x-forwarded-proto https;
        proxy_cache_bypass $http_upgrade;
    }

    location / {
        try_files $uri $uri/ =404;
    }
}

/etc/hosts:

...
127.0.1.1   mydomain.com

Localhost refers to the loopback address. That is actually different from the local network you may have in your home.

I think the problem is that you cannot direct external traffic to the localhost. Instead, you need to host your server to 0.0.0.0 (all ip addresses) or the local ip address of your laptop (probably 192.168.x.x) in order to access the site with another device.

Specifying in /etc/hosts tells your laptop that traffic to your domain should be routed to localhost, but your phone cannot read this.

if you are trying to reach your domain.com from your mobile device and you do not control the DNS for the domain.com, your device will not be able to resolve the hostname correctly unless that DNS record is resolved by one of your internal DNS servers (FritzBox as example). So you need to create a DNS record that your mobile device can resolve.

In this case, you should create a DNS record for your development tasks such as dev.domain.com IN A 192.168.1.1, where 192.168.1.1 is the local network address of your laptop.