Question

我已经设置了一个简单的Mapbox地图，其方向如下所示：

<html>

    <head>
        <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.js'></script>
        <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css' rel='stylesheet' />
    </head>

    <body>
        <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v3.1.1/mapbox-gl-directions.js'></script>
        <link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v3.1.1/mapbox-gl-directions.css' type='text/css' />
        <div id='map' style='width: 800px; height: 600px;'></div>

        <script>
            mapboxgl.accessToken = '#########';

            var directions = new MapboxDirections({
                unit: 'metric',
                profile: 'mapbox/walking',
                container: 'directions',
                controls: { inputs: false }
            });

            var map = new mapboxgl.Map({
                container: 'map',
                style: 'mapbox://styles/andyfurniss/cjgkq5xda006z2rs21ash68cs',
                center: [116.0724, 5.9749],
                zoom: 10
            });

            map.addControl(directions);

            map.on('load', function () {
                directions.setOrigin([110.33333, 1.55]);
                directions.setDestination([116.0724, 5.9749]);
            });
        </script>
    </body>

</html>

但是，当我在Chrome中打开HTML文件时，这会给我以下错误：

无法加载https://api.mapbox.com/directions/v5/mapbox/mapbox/walking/110.33333%2C1.55%3B116.0724%2C5.9749.json?geometries=polyline&alternatives=true&steps=true&overview=full&access_token=undefined：请求的资源上没有“Access-Control-Allow-Origin”标头。因此不允许原点'null'访问。响应的HTTP状态代码为404.

...我认为这是一个CORS错误。我也尝试创建一个.NET Web项目并将Cors添加到服务集合中，但是我得到了同样的错误。我不确定我是如何让CORS解决这个问题的。我知道你可以添加标题，如果你使用Ajax但我不是，我只是直接与Mapbox GL交互。

非常感谢任何帮助！

尝试加载路线时Mapbox CORS错误

0 个答案: