Image access permission issue using OpenLayers

Ionic Framework ionic-v3
1

I am having a problem loading an image using the OpenLayers library. I am trying to load an image that is stored on the device dynamically. If I declare the options manually everything works as expected. If I try to load the image through path using file://... I get the following error:

Not allowed to load local resource: file:///storage/emulated/0/Android/data/io.ionic.starter/files/projects/1/layers/volume.png

To resolve this error I used the Ionic Web View path converter: window.Ionic.WebView.convertFileSrc() .

But this gives me another error, now related to CORS, considering that the access method now uses HTTP GET:

Access to image at ‘http://localhost/_app_file_/storage/emulated/0/Android/data/io.ionic.starter/files/projects/1/layers/volume.png’ from origin ‘http://localhost:8100’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
GET http://localhost/_app_file_/storage/emulated/0/Android/data/io.ionic.starter/files/projects/1/layers/volume.png net::ERR_FAILED

If I include the file in the assets folder and try to upload it, everything works as expected, but it’s not how I want it to work.

Working code (manually configured):

let layerImage = new ImageLayer({
	source: new Static({
		url: 'assets/layers/volume.png',
		crossOrigin: '',
		projection: 'EPSG:31982',
		imageExtent: layerExtent
	}),
	name: "layerImage",
	visible: true,
});
this.map.addLayer(layerImage);

Not working code (dinamically configured inside a for loop):

let filePath = this.win.Ionic.WebView.convertFileSrc(this.file.externalDataDirectory + 'projects/' + this.projectId + '/layers/' + filename);
let layerImage = new ImageLayer({
	source: new Static({
		url: filePath,
		crossOrigin: '',
		projection: 'EPSG:31982',
		imageExtent: layerExtent
	}),
	name: "layerImage",
	visible: true,
});
this.map.addLayer(layerImage);

I saw in some related questions that this can be caused by debugging with Chrome, but the same problem happens if I not use it.

2

Solved by Mike in the comments of this SO question: https://stackoverflow.com/q/59645986/7123439

Basically removing the crossOrigin option from ImageLayer solved the issue.