Доступ к изображению из источника "null" был заблокирован политикой CORS

У меня есть приложение JavaScript в OpenLayers 3, и мой базовый слой создается из локальных фрагментов. Я работаю только на своем компьютере, поэтому не знаю, почему у меня ошибка CORS.

    var newLayer = new ol.layer.Tile({
    source: new ol.source.OSM({
        url: 'E:/Maperitive/Tiles/vychod/{z}/{x}/{y}.png'
    })
});
var schladming = [21.6187, 48.7327]; // longitude first, then latitude
// since we are using OSM, we have to transform the coordinates...
var schladmingWebMercator = ol.proj.fromLonLat(schladming);

var map = new ol.Map({
    layers: [
        newLayer
    ],
    controls: [],
    target: 'mapid',
    view: new ol.View({
        center: schladmingWebMercator,
        zoom: 10,
        minZoom: 10,
        maxZoom: 14
    })
});

сообщение об ошибке с консоли:

Доступ к изображению в file:///E:/Maperitive/Tiles/vychod/10/573/352.png из источника null был заблокирован политикой CORS: неверный ответ. Происхождение null, следовательно, не допускается.

При двойном щелчке по URL изображения изображение открывается. Какие-нибудь идеи, что не так? Раньше у меня не было этой ошибки.

Ответы

Ответ 1

Вы столкнулись с ошибкой CORS.

Попытка получить доступ к вашему файлу с помощью локальной файловой системы не работает в вашем случае.

Origin является нулевым, потому что это ваша локальная файловая система. Не могли бы вы разместить этот файл PNG?

Предложение:

Вместо этого поместите эти файлы в корзину AWS S3. Тогда вы можете использовать протокол http, а не протокол file. ИЛИ настройте какой-нибудь http-сервер в вашей локальной системе и используйте http для вашего localhost для обслуживания файлов, если вы хотите сохранить все локальным.

Больше чтения:

Как работает CORS

Ответ 2

Под обложками будет некоторая форма запроса загрузки URL. Вы не можете загружать изображения или любой другой контент с помощью этого метода из локальной файловой системы.

Ваше изображение должно быть загружено через веб-сервер, поэтому доступ через соответствующий URL-адрес http.

Ответ 3

Проблема была фактически решена путем предоставления crossOrigin: null для источника OSM OpenLayers:

var newLayer = new ol.layer.Tile({
source: new ol.source.OSM({
    url: 'E:/Maperitive/Tiles/vychod/{z}/{x}/{y}.png',
    crossOrigin: null
    })
});

Ответ 4

Решением этой проблемы является обслуживание вашего кода и запуск его на сервере, вы можете использовать веб-сервер для Chrome, чтобы легко обслуживать ваши страницы.

Ответ 5

В этом случае проблема CORS была вызвана использованием неправильного конструктора исходного кода в OpenLayers. ol.source.OSM предназначен для доступа к плиткам OpenStreetMap по умолчанию из Интернета, поэтому по умолчанию используется crossOrigin: "анонимный". Если вы используете локальный исходный URL-адрес, вы должны использовать универсальный конструктор ol.source.XYZ, который не имеет значения по умолчанию для параметра crossOrigin (именно поэтому настройка crossOrigin: null выше сработала). И совершенно законно хотят использовать файл протокола для карт, например на SD-карте мобильного устройства.

Ответ 6

Попробуйте обойти CORS:

Для Chrome: изменить ярлык или с помощью cmd: C:\Chrome.exe --disable-web-security

Для Firefox: Откройте Firefox и введите about: config в строку URL. поиск: security.fileuri.strict_origin_policy установлен на false

Ответ 7

Я столкнулся с той же проблемой с файлом filesaver.js. Итак, я рассмотрел несколько причин, которые

  1. Если у вас нет правильного заголовка HTML.
  2. Если в вашем заголовке есть тег для блокировки внешнего запроса
  3. Если разрешение файла не дано (вы можете установить его с вашей cpanel)
  4. Если вы зашли на сайт http://, и запрос сделан на https://

и последний работал на меня правильно. Я изменил URL с https://на http://, и он отлично работает для меня.