来自"file://"的图像已被跨源资源共享策略阻止加载:

Question

我正在使用leaflet-image.js从传单地图创建图像.用于创建映像的代码是https://github.com/mapbox/leaflet-image中示例中的代码,即

var map = L.mapbox.map('map', 'YOUR.MAPID').setView([38.9, -77.03], 14);
leafletImage(map, function(err, canvas) {
    // now you have canvas
    // example thing to do with that canvas:
    var img = document.createElement('img');
    var dimensions = map.getSize();
    img.width = dimensions.x;
    img.height = dimensions.y;
    img.src = canvas.toDataURL();
    document.getElementById('images').innerHTML = '';
    document.getElementById('images').appendChild(img);
});

问题是图像似乎被某些CORS安全功能阻止.下面是谷歌Chrome控制台的图像(不是firefox中的enevn它不起作用)

你能帮帮我吗？(我的所有服务器都是本地托管的.Webserver,mapserver ......)

Answer 1

通常,在网站中运行的javascript代码无法访问其他网站的资源.但是来自网站的javascript应该能够访问同一网站的资源.这称为同源策略,由所有主流浏览器(不仅仅是Chrome)实施.

请阅读https://developer.mozilla.org/en-US/docs/Same-origin_policy_for_file:_URIs并在Chrome中禁用相同的原始政策.

最快的解决方案是通过您的localhost:8080网站访问图像- 然后,该网站中的JavaScript将能够访问同一网站中的图像资源.