Error 'tileserver Failed to fetch http://localhost:8080/data/' on Mobile Devices, but not on Desktop Devices

[butterisgod]

Bug Description

Current Behavior

When accessing the Tileserver GL instance on mobile devices, the following error is encountered in the JavaScript console:

tileserver Failed to fetch http://localhost:8080/data/

However, this issue does not occur on desktop devices.

Expected Behavior

The Tileserver GL instance should successfully fetch the data without any errors on both mobile and desktop devices.

Steps to Reproduce

1. Set up a Tileserver GL instance using Docker version 2.6.0.
2. Access the instance on a mobile device.
3. Open the JavaScript console.

Additional Information

Full output of the error: { "message": "Failed to fetch http://localhost:8080/data/poi/4/3/6.pbf" } Hundreds of errors as the device scroll. I see no evidence that the calls are coming through to my TileServer console output.

Configuration Block (Reverse Proxy)

 location /tiles/ {
        include proxy_params;
        proxy_pass http://127.0.0.1:8080/;      

        #Disable default CORS Headers
        proxy_hide_header Access-Control-Allow-Origin;

        # Enable Proxy Cache
        proxy_cache TileserverCache;
        proxy_cache_valid 200 1w;

        # Set our Custom CORS
        add_header 'Access-Control-Allow-Origin' $allow_origin;
    }

Code (map.js)

map.on('load', function() {
        map.addSource('poi', {
            type: 'vector',
            tiles: ['http://localhost:8080/data/poi/{z}/{x}/{y}.pbf'],
            maxzoom: 12
        });

        map.addSource('usaRes8', {
            type: 'vector',
            tiles: ['http://localhost:8080/data/usaRes8/{z}/{x}/{y}.pbf'],
            maxzoom: 12
        });

Environment

• Tileserver GL version: 2.6.0

• Mobile Device: Android OS, Chrome, Firefox. iOS Safari. Pixel7 Pro

• Desktop Device: Linux; Chrome, Firefox

[butterisgod]

I think it may be related to how the Mobile device handles the term "localhost" but I'm not certain how to change it, switching to IP address causes Tileserver to fail completely.

[butterisgod]

Found the problem. This is wrong "'http://localhost:8080/data/usaRes8/{z}/{x}/{y}.pbf'" it needs to be the FQDN + endpoint specified in the conf file (which in my case was /tiles/) + the folder linked in your Docker container (which is usually /data/ + the name of the layer,

So in my case its https://domainName.com/tiles/data/layername/{z}/{x}/{y}.pbf or specifically https://poc.hntnews.org/tiles/data/usaRes8/{z}/{x}/{y}.pbf']

The issue that I don't understand is why it would work on my computer but not on my mobile device. And no, it wasn't cached or anything - it was indeed connected and working.

Mysterious...

Edit: Actually, I think I figured it out. VScode allows your computer to connect to the localhost of the remote server you're working on so that you can connect to various processes web services of the server - I was connected so that I could use the TileServer's GUI and that allowed it to work. Man, am I glad I'm done with that bug/issue. Onward now, finally.