来自源'file：//'的图像已被跨源资源共享策略阻止加载： [英] Image from origin 'file://' has been blocked from loading by Cross-Origin Resource Sharing policy:

问题描述

我使用leaflet-image.js从传单地图创建图像。用于创建图片的代码是示例中的代码，位于

你能帮我一下吗？ （也是我的所有服务器都是本地托管的。Webserver，mapserver ...）

解决方案

无法访问其他网站的资源。但是来自网站的javascript应该能够访问同一网站的资源。这称为同源政策，并且已实施。

请务必阅读 https://developer.mozilla.org/en-US/docs/Same-origin_policy_for_file:_URIs 和在Chrome中禁用同源策略。

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

I'm using leaflet-image.js to create an image from a leaflet map. The code used to create the image is the one in the example at https://github.com/mapbox/leaflet-image ie

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);
});

The problem is that the image seems to be blocked by some CORS security feature. Below is an image of the Google Chrome console (not that enevn in firefox it does not work)

Could you help me with that ? (Also all my server are locally hosted. Webserver, mapserver ...)

解决方案

In general, javascript code running in a website cannot access resources from other websites. But a javascript from a website should be able to access resources from that same website. This is called same-origin policy, and is implemented by all major browsers (not just Chrome).

Do read also https://developer.mozilla.org/en-US/docs/Same-origin_policy_for_file:_URIs and Disable same origin policy in Chrome .

The quickest solution is to have the image reachable via your localhost:8080 website - then, the javascript in that website will be able to access a image resource in the same website.

这篇关于来自源'file：//'的图像已被跨源资源共享策略阻止加载：的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！