Доступ к изображению из источника «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
    })
});

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

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

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

javascript,cors,local,openlayers-3,

19

Ответов: 6

7 ов

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

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

6

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

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

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

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

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

Подробнее Чтение:

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

5 ов

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

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

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

Для Chrome: отредактируйте ярлык или с помощью cmd: C: Chrome.exe --disable-web-security

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

0

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

JavaScript, CORS, местный, OpenLayers-3,
Похожие вопросы
Яндекс.Метрика