Mapbox tiles not showing on Leaflet map using Google Chrome

Question

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.

Pfalbaum · Accepted Answer

As suggested, I contacted Mapbox support and they solved the problem. It had to do with restricting the map tiles access token to specific URLS in my Mapbox account.
https://docs.mapbox.com/help/how-mapbox-works/access-tokens/#adding-url-restrictions-to-access-tokens
It was pointed out that Chrome and Firefox had different referrer headers.
Chrome:

Firefox:

I had api.mapbox.com and
https://underjollyroger.github.io/EarlyIllinoisLandcover in the list of URLs already, but Chrome needed a more specific URL. So, after adding https://underjollyroger.github.io to the list the tiles finally showed up in Chrome.

TomazicM · 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.

Mapbox tiles not showing on Leaflet map using Google Chrome

2 Answers

Add your own answers!

Ask a Question