web-dev-qa-db-fra.com

L'accès à l'image à partir de l'origine 'null' a été bloqué par la politique de la SCRO

J'ai une application JavaScript dans OpenLayers 3 et ma couche de base est créée à partir de tuiles locales. Je travaille uniquement sur mon ordinateur, donc 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:

L'accès à l'image sur file:///E:/Maperitive/Tiles/vychod/10/573/352.png à partir de l'origine null a été bloqué par la stratégie CORS: réponse non valide. L'origine null n'est donc pas autorisée.

Lorsque je double-clique sur l'URL de l'image, l'image est ouverte. Des idées ce qui ne va pas? Je n'ai jamais eu cette erreur avant.

javascriptcorslocalopenlayers-3
43
Denis Stephanov

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 null car il s'agit de votre système de fichiers local . Pourriez-vous éventuellement héberger ce fichier png?

Suggestion:

Hébergez ces fichiers dans un compartiment AWS S3. Ensuite, vous pouvez utiliser le protocole http plutôt que le protocole file. OR configurez un serveur http sur votre système local et utilisez http sur votre localhost pour servir les fichiers à partir de si vous souhaitez tout conserver en local.

Plus de lecture:

Comment fonctionne la SCRO

22
Jeremy Iglehart

Sous les couvertures, il y aura une forme de demande de chargement d'URL. Vous ne pouvez pas charger d'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, accessible via une URL http appropriée.

8
Kit

Le problème a é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
    })
});
7
Sadjad Esfandiari

Une solution consiste à servir votre code et à le faire fonctionner sur un serveur. Vous pouvez utiliser un serveur Web pour chrome pour servir facilement vos pages.

3
Damien Doumer

Dans ce cas, le problème CORS a été causé par l’utilisation du mauvais constructeur source dans OpenLayers. ol.source.OSM est destiné à accéder aux tuiles OpenStreetMap par défaut à partir du Web et, pour cette raison, par défaut à 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 la définition de crossOrigin: null s’effectue auparavant). Et il est parfaitement légitime d'utiliser le protocole de fichier pour les cartes, par exemple sur une carte SD d'un appareil mobile.

2
Mike

J'avais exactement le même problème. Dans mon cas, aucune des solutions ci-dessus n'a fonctionné. Pour moi, c'est d'ajouter ce qui suit:

app.UseCors(builder => builder
.AllowAnyOrigin()
.AllowAnyMethod()
.AllowAnyHeader()

Donc, fondamentalement, tout autoriser.

Gardez à l’esprit que cela n’est sûr que s’il s’exécute localement .

0
Hugo Nava Kopp

Essayez de contourner le CORS:

Pour Chrome: modifier le raccourci ou avec cmd: C:\Chrome.exe --disable-web-security

Pour Firefox: Ouvrez Firefox et tapez about: Config dans la barre d’URL. rechercher: security.fileuri.strict_Origin_policy défini sur false

0
S. R.