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.

Riehl

The file:// protocol does not work with CORS - only a certain set of them work, such as http://, among others. – Quantize

but I work only in one domain or I am wrong? How can I fix it ? – Riehl

I am using live server on vs code but it is not working for me. I am also getting the same error. – Baun

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

Nucleolar

So my own images that I created and sourcing from localhost (as file:///) are now a threat to me? Have the standards committees gone insane? – Risarise

I think it has more to do with protecting you from things that auto-launch into the browsers from things like USB sticks, or other types of malicious code that want to run in the browser. – Nucleolar

That doesn't really solve the problem [of protecting from JS viruses] though. If it's your job to make malware, base64 encoding images (really anything binary) and building everything into a single html chunk file is actually quite trivial, then you have no more CORS blocks. Webpack is great for that sort stuff. I feel that all this does is make the hobbyist's life hard while not really stopping anyone with actual intent of writing JS malware, but it's possible I'm not seeing something obvious here. – Risarise

@Risarise No security feature solves the problem of "protecting from JS viruses". They are all just additional layers of trouble for the attacker. Imagine people access myevilwebsite.com and I embedded third party websites (online banking, shopping, mail..). The browser will automatically include (session) cookies and stuff to the requests that myevilwebsite is doing against other sites. If those sites don't allow cross origin requests, my attack fails right there. Also, I read that CORS was designed with backwards compatibility in mind, that's why it seems so messed up sometimes. – Avail

Answer 2

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

With Python 2.7 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.

EDIT: For Python 3 use python -m http.server

Selfsupport

On Windows it has been renamed: python -m http.server – Underclay

no, it's renamed with python3. – Zoosporangium

Answer 3

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

Genvieve

seems like a clever hack more than an intended solution. Nice work anyways, though. – Mcphee

please can you provide more details? – Sindhi

Answer 4

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!

Banquette

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. – Decker

Great suggestion for development env – Weighty

This answer should get more votes :))) – Oday

Answer 5

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.

Brill

Answer 6

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

Storeroom

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. – Salientian

--disable-web-security didn't work for local files – Hamster

This won't work for other people visiting your website – Rawlings

Answer 7

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.

Particle

Can you explain why this resolves the problem? Keep in mind that a good explanation helps others to learn from your answer – Rawlings

Answer 8

just install live server if using vs code in vs code and enable it , it solved the issue in my case.

Papillose

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Amaranth

Answer 9

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.

Unhelm

Answer 10

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.

Shipping

Answer 11

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.

Xyster