如何从 mapbox 解决 Surface API 中的 CORS 问题？答案

【问题标题】：How to work around the CORS issue in Surface API from mapbox?如何从 mapbox 解决 Surface API 中的 CORS 问题？
【发布时间】：2015-08-18 16:19:25
【问题描述】：

我正在尝试使用 Mapbox 的Surface API 来分析两个给定点之间的地形。我正在获取两点的坐标并向 API 发送 AJAX 调用，但我遇到了臭名昭著的 CORS 问题。

首先，我尝试在其示例中使用 Mapbox 本身提供的 URL：

$('#runTerrainAnalysis').on('click', function(e){
    var url = 'https://api.tiles.mapbox.com/v4/surface/mapbox.mapbox-terrain-v1.json?layer=contour&fields=ele&points=-112.084004,36.05322;-112.083914,36.053573;-112.083965,36.053845&access_token=pk.eyJ1Ijoicm9oYW4wNzkzIiwiYSI6IjhFeGVzVzgifQ.MQBzoHJmjH19bXDW0b8nKQ';
    $.ajax({
        url: url,
        method: 'GET',
        success: function(response){
            console.log(response);
        },
        error: function(response){
            console.log(response);
        }
    });
});

跨域请求被阻止：同源策略不允许读取远程资源在 https://api.tiles.mapbox.com/v4/surface/mapbox.mapbox-terrain-v1.json?layer=contour&fields=ele&points=-112.084004,36.05322;-112.083914,36.053573;-112.083965,36.053845&access_token=pk.eyJ1Ijoicm9oYW4wNzkzIiwiYSI6IjhFeGVzVzgifQ.MQBzoHJmjH19bXDW0b8nKQ。（原因：CORS 标头“Access-Control-Allow-Origin”缺失）。

如何让它工作？

【问题讨论】：

尝试包含：crossDomain: true

标签： ajax api cors mapbox

【解决方案1】：

您似乎尚未请求访问 Surface API（目前处于私有测试阶段）。这个：

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
    var url = 'https://api.tiles.mapbox.com/v4/surface/mapbox.mapbox-terrain-v1.json?layer=contour&fields=ele&points=-112.084004,36.05322;-112.083914,36.053573;-112.083965,36.053845&access_token=pk.eyJ1Ijoicm9oYW4wNzkzIiwiYSI6IjhFeGVzVzgifQ.MQBzoHJmjH19bXDW0b8nKQ';
    $.ajax({
        url: url,
        method: 'GET',
        success: function(response){
            console.log(response);
        },
        error: function(response){
            console.log(response);
        }
    });
</script>

返回预期结果：

{"message":"Feature not enabled. Please read https://www.mapbox.com/blog/introducing-the-surface-api for more information."}

您可以在此页面底部请求访问：https://www.mapbox.com/blog/introducing-the-surface-api/

【讨论】：

【解决方案2】：

我们可以使用 JSONP 发送跨域 AJAX 请求。下面是简单的 JSONP 请求：

$.ajax({
    url : url,
    dataType:"jsonp",
});

Source

像魅力一样工作。 :)

【讨论】：

【解决方案3】：

Mapbox API 支持cross-origin requests，没有域限制，所以必须和jquery相关。

尝试包含crossDomain: true：

$.ajax({
    url: url,
    crossDomain: true,
    method: 'GET',

【讨论】：

我在这里用 angularjs 做了一个测试（用你的数据），返回是 “功能未启用。请阅读mapbox.com/blog/introducing-the-surface-api了解更多信息。” i>
是的，公钥不正确，但即使那样我也应该得到你得到的错误。我也尝试了正确的公钥。我已经使用 Postman REST 客户端进行了尝试，我可以看到 Access-Control-Allow-Origin → * 标头返回，这意味着它已启用并且结果也符合预期。但是当我使用我的 jquery 尝试它时，它不起作用。 :(