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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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   gt  builder  AllowAnyOrigin    AllowAnyMethod    AllowAnyHeader     So basically  allow everything    Bear in mind that this is safe only if running locally

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

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

Examples related to javascript

Examples related to cors

Examples related to local

Examples related to openlayers-3