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

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 ...)