web-dev-qa-db-fra.com

L'image du fichier d'origine: // n'a pas pu être chargée par la politique de partage des ressources d'origine croisée:

J'utilise leaflet-image.js pour créer une image à partir d'une carte de dépliant. Le code utilisé pour créer l'image est celui de l'exemple à https://github.com/mapbox/leaflet-image ie

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);
});

Le problème est que l'image semble être bloquée par une fonction de sécurité CORS. Ci-dessous est une image de la console Google Chrome console (pas celle enevn dans Firefox, cela ne fonctionne pas)

enter image description here

Pourriez-vous m'aider avec ça ? (Aussi tous mes serveurs sont hébergés localement. Webserver, mapserver ...)

javascripthtmlcorsleaflet
11
Jason Krs

En général, le code javascript exécuté sur un site Web ne peut pas accéder aux ressources d'autres sites Web. Mais un javascript à partir d'un site Web devrait pouvoir accéder aux ressources de ce même site Web. Cela s'appelle même politique d'origine , et est implémenté par tous les principaux navigateurs (pas seulement Chrome).

Lisez également https://developer.mozilla.org/en-US/docs/Same-Origin_policy_for_file:_URIs et Désactiver la même politique d'origine dans Chrome .

La solution la plus rapide consiste à accéder à l'image via votre localhost:8080 site Web - le javascript de ce site Web pourra alors accéder à une ressource d'image du même site Web.

11
IvanSanchez

Vous devez télécharger les fichiers sur un serveur Web, si vous voulez Chrome pour autoriser ces demandes (ce qui ne se produit pas réellement). Il s'agit d'une mesure de sécurité effectuée par Google, afin que les sites Web puissent " t lire vos fichiers privés.

1
MortenMoulder

Vous devez envoyer l'en-tête Access-Control-Allow-Origin et peut-être quelques autres. C'est une fonction de sécurité, sans elle, par exemple, tous les plugins sociaux (js) seront extrêmement dangereux.

1
PawelN