Изображение из исходного файла://'было заблокировано от загрузки по политике совместного использования ресурсов Cross-Origin:

Я использую 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 не работает)

введите описание изображения здесь

Не могли бы вы мне помочь? (Также весь мой сервер локально размещен. Webserver, mapserver...)

Ответ 1

В общем, код javascript, запущенный на веб-сайте, не может получить доступ к ресурсам с других сайтов. Но javascript с веб-сайта должен иметь доступ к ресурсам с того же сайта. Это называется политика одного и того же происхождения и реализуется всеми основными браузерами (а не только для Chrome).

Прочитайте также https://developer.mozilla.org/en-US/docs/Same-origin_policy_for_file:_URIs и Отключить такую ​​же политику происхождения в Chrome.

Самое быстрое решение состоит в том, чтобы достичь изображения через ваш веб-сайт localhost:8080, тогда javascript на этом веб-сайте сможет получить доступ к ресурсу изображения на том же веб-сайте.

Ответ 2

Вам необходимо загрузить файлы на веб-сервер, если вы хотите, чтобы Chrome разрешал эти запросы (чего на самом деле не происходит). Это измерение безопасности, сделанное Google, поэтому веб-сайты не могут читать ваши личные файлы.

Ответ 3

Вам нужно отправить заголовок Access-Control-Allow-Origin и, возможно, еще немного. Это функция безопасности, без нее, например, все (js) социальные плагины будут крайне небезопасными.