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

新手上路,请多包涵

我正在使用 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 控制台的图像(不是 enevn 在 firefox 中不起作用)

在此处输入图像描述

你能帮我吗? (此外,我所有的服务器都在本地托管。网络服务器、地图服务器……)

原文由 Jason Krs 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 494
2 个回答

一般来说,在一个网站中运行的javascript代码无法访问其他网站的资源。但是来自网站的 javascript 应该能够从同一网站访问资源。这称为 同源策略,所有主要浏览器(不仅仅是 Chrome)都实现了。

另请阅读 https://developer.mozilla.org/en-US/docs/Same-origin_policy_for_file:_URIsDisable same origin policy in Chrome

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

原文由 IvanSanchez 发布,翻译遵循 CC BY-SA 3.0 许可协议

您需要发送标头 Access-Control-Allow-Origin 以及更多。这是安全功能,没有它,例如,所有(js)社交插件都将非常不安全。

原文由 PawelN 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题