将数据从 geojson 文件加载到 mapbox 地图时出现问题

Question

我使用此代码将数据从 geojson 文件加载到此 mapbox 地图：

var mapTooltips = L.mapbox.map('map-tooltips', 'mapbox.streets')
  .setView([54.00366,-2.547855], 6);

  var featureLayer = L.mapbox.featureLayer()
    .loadURL('https://www.mapbox.com/mapbox.js/assets/data/stations.geojson')
    .addTo(mapTooltips);

问题：

使用 mapbox 中的这个 URL 作为测试，标记完美地出现在地图上

https://www.mapbox.com/mapbox.js/assets/data/stations.geojson

但是当我使用相同的文件但来自另一台服务器时，例如：

https://s3.amazonaws.com/web-app-cdata/MapaFel/stations.geojson

标记不出现，不起作用。

使用地图框链接：

使用 S3 链接：

我想提一下，S3 链接具有完全访问权限。理论上任何人都可以访问

有什么想法吗？

Answer 1

默认情况下，不允许从外部域加载资源（例如 geojson 文件）。这被称为制作cross-origin HTTP request。

因此，当 mapbox-gl 尝试从您的 S3 实例加载 geojson 文件(jsfiddle) 时，会出现错误：

XMLHttpRequest 无法加载 https://s3.amazonaws.com/web-app-cdata/MapaFel/stations.geojson。不 请求中存在“Access-Control-Allow-Origin”标头 资源。

您可以从 mapbox 服务器加载相同的 geojson，因为 Mapbox 已通过指定响应标头明确允许此类跨域请求：Access-Control-Allow-Origin: *

作为explained here:

"服务器响应 Access-Control-Allow-Origin: * 这意味着 资源可以被跨站点中的任何域访问 方式。 "