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


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.

  • I'm going through this checklist:docs.mapbox.com/help/troubleshooting/blank-tiles. I haven't found any answer yet. I'm currently using a VPN. Maybe that has something to do with it? But, apparently you're also having problems with Chrome. EDIT: I disconnected from the VPN then tried Chrome again. Same 403 error. – Pfalbaum Nov 20 '20 at 21:47
  • You could try with tile layer option crossOrigin: "". – TomazicM Nov 21 '20 at 10:53
  • From this Mapbox page: docs.mapbox.com/api/maps/#mapbox-tiling-service, the description for the 403 Forbidden error is You do not have permission to view styles for the requested account. Not sure what that means. – Pfalbaum Nov 25 '20 at 22:03
  • 1
    Since it works in all browsers except Chrome (and new Edge, it works in old Edge, Firefox and IE11), this is question for Mapbox support. – TomazicM Nov 25 '20 at 22:23

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.


enter image description here

Firefox: enter image description here

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. enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.