来自“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安全功能阻止了。下面是Google Chrome控制台的图片（不是firefox中的enevn，它不起作用）

你可以帮帮我吗？ （我的所有服务器都是本地托管的.Webserver，mapserver ...）

Answer 1

通常，在网站上运行的JavaScript代码无法访问其他网站的资源。但是来自网站的javascript应该能够访问同一网站的资源。这称为same-origin policy，由所有主流浏览器（不仅仅是Chrome）实施。

请同时阅读https://developer.mozilla.org/en-US/docs/Same-origin_policy_for_file:_URIs和Disable same origin policy in Chrome。

最快的解决方案是通过您的localhost:8080网站访问该图片 - 然后，该网站中的javascript将能够访问同一网站中的图片资源。

Answer 2

如果您希望Chrome允许这些请求（实际上并非如此），您需要将文件上传到网络服务器。这是由Google制作的安全衡量标准，因此网站无法读取您的私人文件。

Answer 3

您需要发送标头 访问控制允许来源 也许还有更多。 这是安全功能，没有它，例如，所有（js）社交插件将非常不安全。