Zeronet: ZeroFrame.monkeyPatchAjax() not working. Documentation needed!

Created on 11 Jan 2020 · 9Comments · Source: HelloZeroNet/ZeroNet

Step 1: Please describe your environment

ZeroNet version: 0.7.1 (rev4253)
Operating system: Ubutu 18.04
Web browser: Firefox (Latest)
Tor status: available
Opened port: Closed
Special configuration: None

Step 2: Describe the problem:

CORS errors when trying to read files using XMLHttpRequest,

Steps to reproduce:

http://127.0.0.1:43110/142uPiiSkemLEviQsYwYtvLvLW7H8mpZWs

<!DOCTYPE html>

<html>

<head>

 <title>New ZeroNet site!</title>

 <meta charset="utf-8">

 <meta http-equiv="content-type" content="text/html; charset=utf-8" />

 <base href="" target="_top" id="base">

 <script>base.href = document.location.href.replace("/media", "").replace("index.html", "").replace(/[&?]wrapper=False/, "").replace(/[&?]wrapper_nonce=[A-Za-z0-9]+/, "")</script>

</head>

<body>

  <input type="file" id="button">


  <div class="viewer">

      <span>3d Preview</span>

    <div id="viewer"></div>

  </div>

<div id="out"></div>

<script type="text/javascript" src="js/ZeroFrame.js"></script>

<script>

class Page extends ZeroFrame {
    setSiteInfo(site_info) {
        var out = document.getElementById("out")
        out.innerHTML =
            "Page address: " + site_info.address +
            "<br>- Peers: " + site_info.peers +

            "<br>- Size: " + site_info.settings.size +

            "<br>- Modified: " + (new Date(site_info.content.modified*1000))

    }

    onOpenWebsocket() {
        this.cmd("siteInfo", [], function(site_info) {
            page.setSiteInfo(site_info)
        })
    }

    onRequest(cmd, message) {
        if (cmd == "setSiteInfo")
            this.setSiteInfo(message.params)
        else
            this.log("Unknown incoming message:", cmd)
    }
}
page = new Page()


</script>

<script type="text/javascript">(new ZeroFrame).monkeyPatchAjax();     </script>

  <script src="js/Detector.js"></script>

  <script src="js/three.min.js"></script>

  <script src="js/STLLoader.js"></script>

  <script src="js/TrackballControls.js"></script>

  <script src="js/viewer.js"></script>


<script type="text/javascript">  


    var loader = new THREE.STLLoader();
      loader.addEventListener( 'load', function ( event ) {

         var geometry = event.content;
          scene.add( new THREE.Mesh( geometry ) );

     } );
      loader.load( '/stl/Demo.stl' );
</script>  


</body>

</html>

Observed Results:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:43110/stl/Demo.stl?ajax_key=undefined. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Expected Results:

Need to retreive STL 3d model using XMLHttpRequest in order for Javascript to load it onto a preview screen, which already works outside of ZeroNet.

Source

TwinLizzie

Most helpful comment

This is kind of a hack though, can we add a callback?

It already supports awaiting it since https://github.com/HelloZeroNet/ZeroHello/commit/a24c137a656bff1523599a368e4431102c5433f4.

So you can now use await zeroframe.monkeyPatchAjax().

filips123 on 11 Jan 2020

👍2

All 9 comments

You have to "guess" when the patch is finished, like this:

var loader = new THREE.STLLoader();
loader.addEventListener( 'load', function(event) {
    var geometry = event.content;
    scene.add(new THREE.Mesh(geometry));
});

var zeroFrame = new ZeroFrame();
zeroFrame.monkeyPatchAjax();
zeroFrame.onRequest = function(cmd, message) {
    if(cmd == 'setSiteInfo') {
        zeroFrame.onRequest = function() {};
        loader.load('/stl/Demo.stl');
    }
};

This is kind of a hack though, can we add a callback? @HelloZeroNet

imachug on 11 Jan 2020

👍1

Hey there. Seems like it's now recognized the ajax key, but still getting errors.. and it only seems to try to load stl when I trigger something like the Update or Publish.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:43110/stl/Demo.stl?ajax_key=eb90ebf142302f4d0cb27bb2cb876e348c4b312774078529947ba783d5bcdf65. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

TwinLizzie on 11 Jan 2020

👀1

You have a slash before pathname which makes it resolve as an absolute path, not a relative path. Replace /stl with stl.

imachug on 11 Jan 2020

🚀1 👍1

My bad. I can see the 3d model now, although it still only shows up after I push some kind of zite update like Update content.json or Publsh to peers. I'll have to closely take a look at the code and try to connect the dots.

Thanks a lot!

TwinLizzie on 11 Jan 2020

Oh, I think I found the problem. You're creating two ZeroFrame instances: one directly and one via new Page.

imachug on 11 Jan 2020

Thanks. Seems smoother, but still only loads on page Update.

TwinLizzie on 11 Jan 2020

This is kind of a hack though, can we add a callback?

It already supports awaiting it since https://github.com/HelloZeroNet/ZeroHello/commit/a24c137a656bff1523599a368e4431102c5433f4.

So you can now use await zeroframe.monkeyPatchAjax().

filips123 on 11 Jan 2020

👍2

Oh, cool! That sounds like a good idea. Try the following:

var loader = new THREE.STLLoader();
loader.addEventListener( 'load', function(event) {
    var geometry = event.content;
    scene.add(new THREE.Mesh(geometry));
});

var zeroFrame = new ZeroFrame();
zeroFrame.monkeyPatchAjax().then(() => loader.load('stl/Demo.stl'));

imachug on 11 Jan 2020

Thanks. The solution from the previous post works perfectly!

TwinLizzie on 16 Jan 2020

Was this page helpful?

0 / 5 - 0 ratings