Mapbox：如何解决 map.addSource() 中的 CORS 问题

Question

我目前正在尝试 Mapbox 示例，特别是 this one。当示例尝试从以下代码获取 GeoJSON 点时：

map.addSource("earthquakes", {
    type: "geojson",
    // Point to GeoJSON data. This example visualizes all M1.0+ earthquakes
    // from 12/22/15 to 1/21/16 as logged by USGS' Earthquake hazards program.
    data: "https://www.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson",
    cluster: true,
    clusterMaxZoom: 15, // Max zoom to cluster points on
    clusterRadius: 20 // Use small cluster radius for the heatmap look
});

我收到以下错误：

Blocking a Cross-Origin Request: The "Same Origin" policy does not allow you to view the remote resource located at https://www.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson . Reason: The CORS "Access-Control-Allow-Origin" header is missing.

我在 http header 中看到了类似的问题，但如何在此处添加？

Answer 1

这取决于 mapbox。他们的服务器说您查询的来源是政策不允许的（检查选项请求中的 headers）。因为他们的政策不支持 Access-Control-Allow-Origin header，所以 XHR 向 mapbox.com 发出的任何请求必须 来自 mapbox.com。

现在您可以通过在本地 VM 上使用代理服务器假装您在 mapbox.com - 使用 HaProxy container 来绕过这个问题，例如，在 Virtual Box 上 - 并在其配置中设置一个 ACL，将某些请求指向 mapbox.com 到您的代码，其余请求指向 mapbox.com 的 IP 地址。然后，您将使用 /etc/hosts 将对 mapbox 的请求传递给您的 VM，并从那里处理它。这不是一个简单的解决方案，我只是认为值得指出它是可能的。

Mapbox：如何解决 map.addSource() 中的 CORS 问题

Mapbox: How to solve CORS issue in map.addSource()

cross-domain

mapbox-gl-js