javascript - headers - enable-cors

El acceso a la imagen desde el origen ''null'' ha sido bloqueado por la política de CORS

Question

Tengo una aplicación de JavaScript en OpenLayers 3, y mi capa base se crea a partir de mosaicos locales. Trabajo solo en mi computadora, así que no sé por qué tengo un error 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
})
});

mensaje de error desde la consola:

El acceso a la imagen en el file:///E:/Maperitive/Tiles/vychod/10/573/352.png desde el origen null ha sido bloqueado por la política de CORS: respuesta no file:///E:/Maperitive/Tiles/vychod/10/573/352.png . Por tanto, no se permite el acceso al origen null .

Cuando hago doble clic en la URL de la imagen, la imagen se abre. ¿Alguna idea de lo que está mal? Nunca tuve ese error antes

Answer 1

Debajo de las cubiertas habrá alguna forma de solicitud de carga de URL. No puede cargar imágenes o cualquier otro contenido a través de este método desde un sistema de archivos local.

Su imagen debe cargarse a través de un servidor web, de modo que se puede acceder a través de una URL http adecuada.

Answer 2

El problema se resolvió realmente proporcionando crossOrigin: null a la fuente OSM de OpenLayers:

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

Answer 3

En este caso, el problema CORS se debió al uso del constructor de origen incorrecto en OpenLayers. ol.source.OSM está diseñado para acceder a los mosaicos de OpenStreetMap predeterminados desde la web y, por esa razón, el valor predeterminado es crossOrigin: ''anonymous''. Si está utilizando una URL de origen local, debe usar el constructor ol.source.XYZ genérico que no establece por defecto la configuración de origen cruzado (que es la razón por la cual la configuración de origen cruzado: nulo anterior funcionó). Y es perfectamente legítimo querer usar el protocolo de archivo para mapas, por ejemplo, en una tarjeta SD de un dispositivo móvil.

Answer 4

Te encuentras con un error CORS.

Intentar acceder a su archivo utilizando el sistema de archivos local no funciona en su caso.

Origin es nulo porque es su sistema de archivos local . ¿Podrías alojar este archivo png?

Sugerencia:

Aloje estos archivos en un cubo de AWS S3 en su lugar. Luego puede usar el protocolo http lugar del protocolo de file . O configure algún servidor http en su sistema local y use http para su servidor local para servir los archivos si desea mantener todo local.

Más lectura:

Cómo funciona CORS

Answer 5

Trate de pasar por alto CORS:

Para Chrome: edite el acceso directo o con cmd: C: / Chrome.exe --disable-web-security

Para Firefox: abra Firefox y escriba about: config en la barra de URL. buscar: security.fileuri.strict_origin_policy establecido en falso

Answer 6

Una solución para esto es servir su código, y hacer que se ejecute en un servidor, puede usar el servidor web para Chrome para servir fácilmente sus páginas.