Troubleshooting: CORS errors

If you are receiving a CORS (cross origin request sharing) error such as:

XMLHttpRequest cannot load file:///mapbox.js/assets/data/states.geojson. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

CORS error

This means that the file you have opened is attempting to load external data, either from a relative or absolute URL:

var statesLayer = L.mapbox.featureLayer()
  // Grab some GeoJSON data from a relative URL
  .loadURL('/mapbox.js/assets/data/states.geojson')
  .on('click', handleClick)
  .on('ready', resetStyles)
  .addTo(map);

The code above, copied from a Mapbox.js example, points to a GeoJSON file in a different directory. Your browser interprets this as a cross origin HTTP request. As with any AJAX request, this technique is subject to the Same Origin Policy. To avoid this error, we can either put the file on the same domain (or, for local testing, in the same directory) as the Javascript, or open the file via a server delivering that supports CORS. Python’s SimpleHTTPServer supports CORS and is relatively straightforward to set up.

Additional questions? Ask our support team or learn more about How Mapbox Works.