clickable html app: Accesss to XMLHttpRequest from origin 'file://' has been blocked by CORS policy

bob0

Hello,

I am experimenting with clickable HTML app.
I am using clickable 7.6.0

I generate a template using clickable create and I select HTML template.

Then I try modifying the index.html webpage adding a simple ajax request:

<script>
	function run() {

		// Creating Our XMLHttpRequest object
		var xhr = new XMLHttpRequest();

		// Making our connection
		var url = 'https://jsonplaceholder.typicode.com/todos/1';
		xhr.open("GET", url, true);

		// function execute after request is successful
		xhr.onreadystatechange = function () {
			if (this.readyState == 4 && this.status == 200) {
				console.log(this.responseText);
			}
		}
		// Sending our request
		xhr.send();
	}
	run();
</script>

While this code works opening the index.html file on Firefox, it seems ajax requests are blocked from the webapp-containter. I get this error:

qml: [JS] (file:///home/bob0/Desktop/testapp/build/all/app/install/www/index.html:0) Access to XMLHttpRequest at 'https://jsonplaceholder.typicode.com/todos/1' from origin 'file://' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

How can I enable the possibility make AJAX request from an HTML app? Is there any setting/policy to be changed?

Thank you in advance for your help!

lduboeuf

@bob0 in your desktop file, append --disable-web-security in your "Exec" line

bob0

@lduboeuf Thank you. It works. Just for my curiosity, was this documented somewhere?

lduboeuf

@bob0 said in clickable html app: Accesss to XMLHttpRequest from origin 'file://' has been blocked by CORS policy:

@lduboeuf Thank you. It works. Just for my curiosity, was this documented somewhere?

This is standard "Chrome" security policy AFAIK

CiberSheep

@lduboeuf @bob0 This can also be achieved in the webview component: https://gitlab.com/cibersheep/quixe-qml/-/blob/master/qml/WebviewPage.qml#L41

bob0

When testing with clickable desktop, the app performs AJAX calls without any problem.

However, when testing on a real device (PinePhone, in my case), AJAX calls are still blocked...

bob0

@lduboeuf It seems creating a QML container app works better thatn the HTML template method. Thank you for sending the link to your project.

aitzol

@lduboeuf only works for desktop

arubislander

@aitzol if you mean, your app works on the desktop bit not on the device, you are probably missing the networking policy in your apparmor manifest file. See here for further information