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);
        }
    });
});

阻止跨源请求：同源策略禁止读取远程资源在 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'。

如何让它发挥作用？

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>

返回预期结果：

{"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问题？

3 个答案: