75

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.

Alexander O'Mara
  • 52,993
  • 16
  • 139
  • 151
Denis Stephanov
  • 2,777
  • 12
  • 48
  • 104

10 Answers10

41

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

Jeremy Iglehart
  • 3,307
  • 2
  • 22
  • 31
13

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
    })
});
Sadjad Esfandiari
  • 316
  • 2
  • 7
11

Under the covers there will be some form of URL loading request. You can't load images or any other content via this method from a local file system.

Your image needs to be loaded via a web server, so accessed via a proper http URL.

Kit
  • 654
  • 4
  • 11
6

A solution to this is to serve your code, and make it run on a server, you could use web server for chrome to easily serve your pages.

Damien Doumer
  • 1,132
  • 1
  • 11
  • 19
5

To solve your error I propose this solution: to work on Visual studio code editor and install live server extension in the editor, which allows you to connect to your local server, for me I put the picture in my workspace 127.0.0.1:5500/workspace/data/pict.png and it works!

abdelhadi lebbar
  • 51
  • 1
  • 1
  • 2
    Great it worked, just installed live server extension, then opened home page html file in the code editor and typed on Go Live in the status bar of visual studio code editor and done got the website worked. – shubham mishra Sep 19 '20 at 09:50
4

Try to bypass CORS:

For Chrome: edit shortcut or with cmd: C:\Chrome.exe --disable-web-security

For Firefox: Open Firefox and type about:config into the URL bar. search for: security.fileuri.strict_origin_policy set to false

S. R.
  • 83
  • 6
  • 1
    this can become a security issue, especially if you're using the web on the same browser that you've disabled CORS on. alternatively, i've heard of people downloading a separate install of chrome for dev work only. – asparism Oct 29 '20 at 06:00
3

In this case the CORS problem has been caused by using the wrong source constructor in OpenLayers. ol.source.OSM is intended for accessing the default OpenStreetMap tiles from the web and for that reason defaults to crossOrigin:'anonymous'. If you are using a local source URL you should use the generic ol.source.XYZ constructor which doesn't default the crossOrigin setting (which is why setting crossOrigin:null above happened to work). And it is perfectly legitimate want to use file protocol for maps, for example on an SD card of a mobile device.

Mike
  • 10,641
  • 2
  • 5
  • 20
3

I was having the exact same problem. In my case none of the above solutions worked, what did it for me was to add the following:

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

So basically, allow everything.

Bear in mind that this is safe only if running locally.

Hugo Nava Kopp
  • 2,358
  • 2
  • 21
  • 36
1

For local development you could serve the files with a simple web server.

With Python installed, go into the folder where your project is served, like cd my-project/. And then use python -m SimpleHTTPServer which would make index.html and it's JavaScript files available at localhost:8000.

Michael Johansen
  • 3,702
  • 2
  • 20
  • 34
0

The browser is at the local file system where you're requesting the file. The request was made through XHR. So the origin is mentioned as null. if 'null' is added in the list of protocol schemes supported by CORS, you would access it. But sadly you cant.

susheelbhargavk
  • 79
  • 2