如何在mapbox中解决Surface API中的CORS问题？(How to work around the CORS issue in Surface API from mapbox?)

如何在mapbox中解决Surface API中的CORS问题？(How to work around the CORS issue in Surface API from mapbox?)

我试图通过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'）。

如何使这个工作？

I am trying to use the Surface API by Mapbox to analyze the terrain between two given points. I am taking the coordinates of the two points and sending an AJAX call to the API but I am stuck with the infamous CORS issue.

To start with I am trying to use the URL provided by Mapbox itself in its examples:

$('#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).

How do get this to work?

最满意答案

Mapbox API支持没有域限制的跨源请求 ，因此它必须与jquery相关。

尝试包含crossDomain: true ：

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

We can send cross domain AJAX requests using JSONP. Below is the simple JSONP Request:

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

Source

Working like a charm. :)