Leaflet – How to Fix Mapbox Tiles Not Showing in Google Chrome

githubjavascriptleafletmapbox

https://underjollyroger.github.io/EarlyIllinoisLandcover

There is a 403 (Forbidden) error and the Mapbox tiles will not display when viewing from Google Chrome (zoom in six times with the mouse wheel to view tiles). I'm using a Mapbox API access token and the app is hosted from Github. The app works fine from Firefox.

enter image description here

Best Answer

This won't be the solution, it will just point to the most probable cause of the 403 error.

Here are request headers from three different browsers, where Firefox and venerable IE11 worked OK and Chrome failed.

IE11 (works OK):

Accept: image/png, image/svg+xml, image/*;q=0.8, */*;q=0.5
Referer: https://underjollyroger.github.io/EarlyIllinoisLandcover/
Accept-Language: sl-SI
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like Gecko
Accept-Encoding: gzip, deflate
Host: api.mapbox.com
DNT: 1
Connection: Keep-Alive
Cache-Control: no-cache

Firefox (works OK):

Accept: image/webp,*/*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.5
Connection: keep-alive
Cookie: _ga=GA1.2.53209774.1591279471;…apbox.com-1591279471188-18008
Host: api.mapbox.com
Referer: https://underjollyroger.github.io/EarlyIllinoisLandcover/
User-Agent: Mozilla/5.0 (Windows NT 6.1; W…) Gecko/20100101 Firefox/70.0

Chrome (fails with 403):

Accept: image/avif,image/webp,image/apng,image/*,*/*;q=0.8
Accept-Encoding: gzip, deflate, br
Accept-Language: en-GB,en;q=0.9,en-US;q=0.8,sl;q=0.7
Cache-Control: no-cache
Connection: keep-alive
Host: api.mapbox.com
Pragma: no-cache
Referer: https://underjollyroger.github.io/
Sec-Fetch-Dest: image
Sec-Fetch-Mode: no-cors
Sec-Fetch-Site: cross-site
User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36

What immediately stands out in Chrome headers are additional Sec-Fetch-* settings which obviously impose some additional restrictions regarding CORS policy, and it seems like Mapbox server does not like that.

Related Question