fail: leaflet-locatecontrol: cross-site access denied

gamecubate commented 9 years ago

The leaflet locate control plugin does not work in Chrome (not tested in other browsers) because of multiple cross-site access denial. This issue was reported on the developer's page (https://github.com/domoritz/leaflet-locatecontrol/issues/125#issuecomment-114729166). He then suggested I report the issue here.

To reproduce:

launch Chrome
in Chrome, open JS console
go to https://www.mapbox.com/mapbox.js/example/v1.0.0/leaflet-locatecontrol/
observe that: a. no icon displayed in leaflet locate control b. console reports cross-site problem.

Note: the sample code per current mapbox docs is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Leaflet Locate</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.2.0/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.2.0/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.43.0/L.Control.Locate.min.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.43.0/L.Control.Locate.mapbox.css' rel='stylesheet' />
<!--[if lt IE 9]>
<link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.43.0/L.Control.Locate.ie.css' rel='stylesheet' />
<![endif]-->
<link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.43.0/css/font-awesome.min.css' rel='stylesheet' />

<div id='map'></div>
<script>
L.mapbox.accessToken = 'pk.eyJ1IjoiaW5mb2pkZW0iLCJhIjoiVkJKT2ZjOCJ9.pj-RGZgqDtab-IYB65hjcA';
    var map = L.mapbox.map('map', 'mapbox.streets');
    L.control.locate().addTo(map);
</script>
</body>
</html>

int-ua commented 9 years ago

Latest Firefox is affected too.

jfirebaugh commented 9 years ago

In Chrome 43.0.2357.124 I see an error in the console, but the UI appears to be correct and complete. The error is:

Font from origin 'https://api.tiles.mapbox.com' has been blocked from loading by Cross-Origin Resource Sharing policy: The 'Access-Control-Allow-Origin' header contains multiple values ', ', but only one is allowed. Origin 'https://www.mapbox.com' is therefore not allowed access.

The request that it's complaining about is https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.43.0/fonts/fontawesome-webfont.woff2?v=4.3.0, which has the following headers:

Access-Control-Allow-Methods:GET
Access-Control-Allow-Methods:GET
Access-Control-Allow-Origin:*
Access-Control-Allow-Origin:*

jfirebaugh commented 8 years ago

This has been fixed on the CDN.

mapbox / mapbox.js-plugins

fail: leaflet-locatecontrol: cross-site access denied #29