Question

我在本地计算机上测试一个简单的mapbox示例时得到以下消息（在端口localhost：8000上使用python SimpleHTTPServer提供）：

10:06:53.909 Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://a.tiles.mapbox.com/v4/mapbox.mapbox-terrain-v2,mapbox.mapbox-streets-v7/[...]. (Reason: CORS request failed).1 <unknown>

html文件很直接：

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.17.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.17.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<div id='map'></div>
<script>
mapboxgl.accessToken = <myaccesstoken>;
var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/streets-v8', //stylesheet location
    center: [-74.50, 40], // starting position
    zoom: 9 // starting zoom
});
</script>

</body>
</html>

我正在浏览Firefox，尝试过禁用CORS政策，我失去了信心，天哪应该这么简单！任何帮助非常感谢！

编辑：如果我调用mapzen或osm2vectortile服务会得到同样的问题，所以mapbox不是问题，看起来像是一个通用的cors问题

Answer 1

也许您可以在文档的第一行添加此标题，上面＆lt; ！DOCTYPE html＆gt;：

<?php header("Access-Control-Allow-Origin: *"); ?>

从localhost访问mapbox时出现cors问题

1 个答案: