Access to Image from origin 'null' has been blocked by CORS policy

Question

I have JavaScript application in OpenLayers 3, and my base layer is created from local tiles. I work only in my computer so I do not know why I have CORS error.

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

error message from console:

Access to Image at file:///E:/Maperitive/Tiles/vychod/10/573/352.png from origin null has been blocked by CORS policy: Invalid response. Origin null is therefore not allowed access.

When I double-click on image URL, image is opened. Any ideas what is wrong? I never had that error before.

Answer 1

You're running into a CORS error.

Trying to access your file using the local file system doesn't work in your case.

Origin is null because it's your local file system. Could you possibly host this png file?

Suggestion:

Host these files to an AWS S3 bucket instead. Then you can use the http protocol rather than the file protocol. OR setup some http server on your local system and use http to your localhost to serve the files from if you want to keep everything local.

More Reading:

How CORS Works

Answer 2

The problem was actually solved by providing crossOrigin: null to OpenLayers OSM source:

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