L'accès à l'image depuis l'origine 'null' a été bloqué par la politique CORS.

Question

J'ai une application JavaScript dans OpenLayers 3, et ma couche de base est créée à partir de tuiles locales. Je ne travaille que sur mon ordinateur et je ne sais pas pourquoi j'ai une erreur 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
    })
});

message d'erreur de la console :

Accès à l'image à file:///E:/Maperitive/Tiles/vychod/10/573/352.png d'origine null a été bloqué par la politique CORS : Réponse invalide. Origine null n'est donc pas autorisé à y accéder.

Lorsque je double-clique sur l'URL de l'image, celle-ci s'ouvre. Avez-vous une idée de ce qui ne va pas ? Je n'ai jamais eu cette erreur auparavant.

Answer 1

Vous rencontrez une erreur CORS.

Essayer d'accéder à votre fichier en utilisant le système de fichiers local ne fonctionne pas dans votre cas.

Origin est nulle car c'est votre système de fichiers local . Pourriez-vous hôte ce fichier png ?

Suggestion :

Hébergez plutôt ces fichiers dans un seau AWS S3. Vous pouvez alors utiliser la fonction http plutôt que le protocole file protocole. OU installer un serveur http sur votre système local et utiliser http à votre localhost pour servir les fichiers si vous voulez garder tout en local.

Plus de lecture :

Comment fonctionne CORS

Answer 2

Le problème a en fait été résolu en fournissant crossOrigin : null à la source OpenLayers OSM :

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

Answer 3

Sous la couverture, il y aura une certaine forme de demande de chargement d'URL. Vous ne pouvez pas charger des images ou tout autre contenu via cette méthode à partir d'un système de fichiers local.

Votre image doit être chargée via un serveur web, donc accessible via une URL http appropriée.

Answer 4

Une solution à cela est de servir votre code, et de le faire fonctionner sur un serveur, vous pouvez utiliser le serveur web pour chrome pour servir facilement vos pages.

Answer 5

Dans ce cas, le problème CORS a été causé par l'utilisation du mauvais constructeur de source dans OpenLayers. ol.source.OSM est destiné à accéder aux tuiles OpenStreetMap par défaut à partir du web et pour cette raison, la valeur par défaut est crossOrigin : 'anonymous'. Si vous utilisez une URL source locale, vous devez utiliser le constructeur générique ol.source.XYZ qui ne définit pas par défaut le paramètre crossOrigin (c'est pourquoi le paramètre crossOrigin:null ci-dessus a fonctionné). Et il est parfaitement légitime de vouloir utiliser le protocole de fichier pour les cartes, par exemple sur la carte SD d'un appareil mobile.