cross-domain - map 框 : How to solve CORS issue in map. addSource()

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.

我看到了类似的问题 what to add in http header 但是如何在这里做呢？

Answer 1

这取决于 mapbox。他们的服务器说您查询的来源是政策不允许的(检查选项请求中的 header )。因为他们的策略不支持 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，并从那里处理它。这不是一个简单的解决方案，我只是认为值得指出它是可能的。