UBports Robot Logo UBports Forum
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Register
    • Login

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

    Scheduled Pinned Locked Moved App Development
    9 Posts 5 Posters 491 Views 2 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
      Reply
      • Reply as topic
      Log in to reply
      This topic has been deleted. Only users with topic management privileges can see it.
      • B Offline
        bob0
        last edited by

        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!

        lduboeufL 1 Reply Last reply Reply Quote 0
        • lduboeufL Offline
          lduboeuf @bob0
          last edited by

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

          B CiberSheepC A 3 Replies Last reply Reply Quote 1
          • B Offline
            bob0 @lduboeuf
            last edited by bob0

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

            lduboeufL 1 Reply Last reply Reply Quote 0
            • lduboeufL Offline
              lduboeuf @bob0
              last edited by

              @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

              B 1 Reply Last reply Reply Quote 0
              • CiberSheepC Offline
                CiberSheep @lduboeuf
                last edited by

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

                Another planet, another time, another universe!

                1 Reply Last reply Reply Quote 1
                • B Offline
                  bob0
                  last edited by

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

                  1 Reply Last reply Reply Quote 1
                  • B Offline
                    bob0 @lduboeuf
                    last edited by

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

                    1 Reply Last reply Reply Quote 0
                    • A Offline
                      aitzol @lduboeuf
                      last edited by

                      @lduboeuf only works for desktop

                      arubislanderA 1 Reply Last reply Reply Quote 0
                      • arubislanderA Offline
                        arubislander @aitzol
                        last edited by

                        @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

                        πŸ‡¦πŸ‡Ό πŸ‡³πŸ‡± πŸ‡ΊπŸ‡Έ πŸ‡ͺπŸ‡Έ
                        Happily running Ubuntu Touch
                        Google Pixel 3a (20.04 DEV)
                        JingPad (24.04 preview)
                        Meizu Pro 5 (16.04 DEV)

                        1 Reply Last reply Reply Quote 0
                        • First post
                          Last post