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

Question

我正在尝试使用 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);
        }
    });
});

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at 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. (Reason: CORS header 'Access-Control-Allow-Origin' missing).

如何让它发挥作用？

Answer 1

Mapbox API 支持 cross-origin requests 没有域限制，所以它必须与 jquery.

有关

尝试包括 crossDomain: true:

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

Answer 2

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

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

Source

像魅力一样工作。 :)

Answer 3

您似乎还没有请求访问 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>

returns 预期结果：

{"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/

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

How to work around the CORS issue in Surface API from mapbox?

api

ajax

cors

mapbox