Basic Authentication in Leaflet

Question

I'm using Leaflet to display map tiles. The map tiles are loaded from a different site using basic authentication. So the url template looks like this: L.tileLayer('https://username:[email protected]/tiles/{z}/{x}/{y}.png')

Unfortunately this results in map tiles not loading, since e.g. Internet Explorer just ignores the username and password in web site adresses.

Is there a way to succesfully authenticate the Leaflet map tile requests without using a proxy but still using basic authentication?

Answer 1

Without knowing the tile provider, hard to tell how to best to structure the URL call. A workaround could simply be to use a similar tile service... here's a bunch that show both preview and the L.tileLayer configurations:

https://leaflet-extras.github.io/leaflet-providers/preview/

Answer 2

Some browsers block links containing credentials, while others even block resources. I am able to load tiles which require HTTP basic authentication using Leaflet on Firefox, but not on Chrome.

See: https://bugs.chromium.org/p/chromium/issues/detail?id=435547