Image from origin 'file://' has been blocked from loading by Cross-Origin Resource Sharing policy:

Question

I'm using leaflet-image.js to create an image from a leaflet map. The code used to create the image is the one in the example at https://github.com/mapbox/leaflet-image ie

var map = L.mapbox.map('map', 'YOUR.MAPID').setView([38.9, -77.03], 14);
leafletImage(map, function(err, canvas) {
    // now you have canvas
    // example thing to do with that canvas:
    var img = document.createElement('img');
    var dimensions = map.getSize();
    img.width = dimensions.x;
    img.height = dimensions.y;
    img.src = canvas.toDataURL();
    document.getElementById('images').innerHTML = '';
    document.getElementById('images').appendChild(img);
});

The problem is that the image seems to be blocked by some CORS security feature. Below is an image of the Google Chrome console (not that enevn in firefox it does not work)

Could you help me with that ? (Also all my server are locally hosted. Webserver, mapserver ...)

score 12 · Accepted Answer · answered Jun 13 '16 at 09:22

In general, javascript code running in a website cannot access resources from other websites. But a javascript from a website should be able to access resources from that same website. This is called same-origin policy, and is implemented by all major browsers (not just Chrome).

Do read also https://developer.mozilla.org/en-US/docs/Same-origin_policy_for_file:_URIs and Disable same origin policy in Chrome .

The quickest solution is to have the image reachable via your localhost:8080 website - then, the javascript in that website will be able to access a image resource in the same website.

Thank You. I understand it now – Jason Krs Jun 13 '16 at 20:44 — Jason Krs, Jun 13 '16 at 20:44

score 1 · Answer 2 · answered Jun 11 '16 at 21:12

1

You need to upload the files to a web server, if you want Chrome to allow these requests (which doesn't actually happen). This is a security measurement made by Google, so websites can't read your private files.

answered Jun 11 '16 at 21:12

MortenMoulder

6,138
11
60
116

Sorry for asking but WHat files ? My HTML/CSS/JS files ? The image created by leaflet-image.js ? – Jason Krs Jun 11 '16 at 21:48
I tried using Google Chrome Web server https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb?hl=en BUT I still get the same error `Image from origin 'http://localhost:8080' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:8887' is therefore not allowed access.` – Jason Krs Jun 11 '16 at 21:53
1

You need to use a web server. Any server that has either Apache or Nginx (or whatever) installed on a dedicated server. You cannot bypass this on your local machine, because Google Chrome thinks it's a threat (which it could be). – MortenMoulder Jun 12 '16 at 12:01

score 1 · Answer 3 · answered Jun 11 '16 at 22:01

1

You need to send header Access-Control-Allow-Origin and maybe few more. This is security feature, without it, for example, all (js) social plugins will be extremely unsafe.

answered Jun 11 '16 at 22:01

PawelN

339
2
9

how do I do that with javascript ? I did is with php a while ago with `` from http://stackoverflow.com/questions/20035101/no-access-control-allow-origin-header-is-present-on-the-requested-resource – Jason Krs Jun 12 '16 at 17:25

Image from origin 'file://' has been blocked from loading by Cross-Origin Resource Sharing policy:

3 Answers3

Linked