Switch to fetch to retrieve files

[antho1404]

I have been having issues while fetching with XMLHttpRequest (downloading a file from firestore) that seems solved by fetch in my case.

The issue was related to some CORS authorizations.

This PR switches from XMLHttpRequest to fetch as fetch is widely supported now. I'm aware that it might have some unexpected side effects that I might not be aware of.

[omrips]

Hi, thanks for your advice and code! My problem with this is bowser's support - I'm not so sure this code will run on all devices.

Can you create a fall-back method (that will run your code only if the browser support it, else will try the good old xhr) ?

[antho1404]

That might definitely be possible, I will try to work on that soon.

[antho1404]

I added the compatibility with fetch only if fetch is available

[omrips]

Thank you :) I'm doing some testing, then I'll merge.

[omrips]

Working great, BUT - it doesn't bypass the CORS problem - here is my little test: https://www.viewstl.com/new_viewstl/try2.html

did I miss something?

[antho1404]

I had this issue using a file stored in firebase storage. The error I have with xhr is the following:

Access to XMLHttpRequest at 'https://firebasestorage.googleapis.com/v0/b/xxx.appspot.com/o/stl%2FBxT3YiyP0T8mJ725XZzV%2Ffile.stl?alt=media&token=733ac4f8-fe29-4cad-af56-5bf1501b7b71' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

It looks like a CORS issue but might be something else. When I switch to the fetch version, this error disappears, and the file is loaded correctly.

You can try the following model:

{
  filename: "https://firebasestorage.googleapis.com/v0/b/ferme3d.appspot.com/o/stl%2FBxT3YiyP0T8mJ725XZzV%2Ffile.stl?alt=media&token=733ac4f8-fe29-4cad-af56-5bf1501b7b71"
}

This model works with the test I sent in the issue https://github.com/omrips/viewstl/issues/11#issue-795636856

(I'm not sure the file will be accessible for a long time as the token might expire for security reasons, please let me know, and I can generate another link if expired)

It might just be an invalid error from firebase and the error is something else, maybe the type of request that is missing something from xhr and that fetch is adding by default or the other way around.

[omrips]

After a bit of research, I managed to find the problem with my XHR request - turns out that google's firebase doesn't like the header "Content-type" ... if I remove this header XHR works like charm (I've no idea why the "CORS" error tho ...) (this header doesn't make sense here anyway ... it was a copy+paste leftover, happens to lazy programmers all the time lol)

I merged your code, as "fetch" is cleaner, and in some cases works faster, so why not.

Many Thanks :D

[uggrock]

@omrips Can you place make the use of fetch optional. It is preventing the loading of local files (urls begining with file:///), which is essential for using this package as an offline viewer for 3d models.