RangerMauve / hyper-sdk

Make your own hyper apps!
https://www.youtube.com/watch?v=HyHk4aImd_I&list=PL7sG5SCUNyeYx8wnfMOUpsh7rM_g0w_cu&index=20
MIT License
290 stars 46 forks source link

Cross Origin Request Blocked #21

Closed urgent closed 4 years ago

urgent commented 4 years ago

What I Wanted DatArchive.load and read file per https://github.com/datproject/sdk#apiexamples-promise

What I Did

index.js:

// Auto-detects sane defaults based on your environment
// Uses Beaker's APIs if they are if they are available
// DatArchive is the same as Beaker
// https://beakerbrowser.com/docs/apis/dat
const { DatArchive } = require("dat-sdk/auto");

(async function() {
  const archive = await DatArchive.load("dat://dat.foundation");

  const someData = await archive.readFile("/dat.json", "utf8");

  console.log("Dat foundation dat.json:", someData);
})();

browserify -d index.js > test-bundle.js

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="/test-bundle.js" defer></script>
  </head>
  <body>
    <div></div>
  </body>
</html>

What I Got

Firefox console output: TypeError: NetworkError when attempting to fetch resource. Firefox can’t establish a connection to the server at ws://localhost:3472/. stream.js:64 Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://gateway.mauve.moe/undation/.well-known/dat. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

TypeError: NetworkError when attempting to fetch resource.

RangerMauve commented 4 years ago

Oh wow. I think it's an error parsing dat.foundation. Could you try out dat://beakerbrowser.com to see if it works?

urgent commented 4 years ago

No, still no luck: image

image

RangerMauve commented 4 years ago

Gonna try to reproduce it on my end. Are you using the latest version of the SDK?

RangerMauve commented 4 years ago

Oh dang! Thank you so much for bringing this up. I think I found the problem! :D

RangerMauve commented 4 years ago

Could you try installing the latest version on master and seeing if it works?

npm i -s datproject/sdk

urgent commented 4 years ago

Closed with:

https://github.com/datproject/sdk/commit/0ba4031d360f51cc977e15b652c0932e6fa5af65

RangerMauve commented 4 years ago

Awesome! :D

urgent commented 4 years ago

@RangerMauve I am still getting that file not found error.

I closed it while I tested on creating an archive of my own, think that would fix it like there were different files in a new archive, but no luck.

I'm just getting started with dat, and will debug this too on my side.

RangerMauve commented 4 years ago

Ok, this might sound dumb. But try adding in a delay of like 3 seconds before doing a readdir. :P

It might just not be loading the data quickly enough.

RangerMauve commented 4 years ago

I had a bunch of code in place to account for such a circumstance, but it looks like it still needs some work.

You can add something like this after the initial DatArchive.load() call:

await new Promise((resolve) => setTimeout(resolve, 3000))

That'll wait for 3 seconds for it to sync up with peers.

RangerMauve commented 4 years ago

I think I found something that'll help. I'll try releasing it tomorrow after doing a thorough regression test.

urgent commented 4 years ago

Yes that 3 second wait worked great. Thank you!