icidasset / diffuse

A music player that connects to your cloud/distributed storage.
https://diffuse.sh
Other
811 stars 68 forks source link

Lighttpd WebDAV support #381

Closed stokito closed 1 year ago

stokito commented 1 year ago

I have a router with usb disk attached and I tried to use the Diffuse over WebDAV. I installed Lighttpd and WebDAV and configuration looks like: https://gist.github.com/stokito/0a6274106d407ba6d9fb776e7773445d

here is a full instruction https://openwrt.org/docs/guide-user/services/nas/webdav

But experiencing some weird bugs. First of all I had to enable the CORS headers not just for OPTIONS methods but for all requests. In my 99-disk.conf file you can uncomment $HTTP["request-method"] =~ "^(OPTIONS)$" { and see the result. Maybe I doing something wrong and this is not related to the diffuse itself. But maybe it's something that you know.

Next when I started adding the CORS to all requests the Diffuse started working and scanned my WebDAV share. And when it found a music file it sends a HEAD request but it fails:

Access to fetch at 'https://disk.stokito.com/dav/Music/Akasha/Akasha%20Experience%20-%20Twilight%20-%2001%20Twilight.mp3?service_worker_authentication=ss3sssa2l0bzgha2wubW4%3D' from origin 'https://diffuse.sh' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Call stack:

brain.js:7 TypeError: Failed to fetch
    at ut.getHeadInfo (brain.js:1:278629)
    at Qo.fetchFileInfoWithHeadRequest (brain.js:1:277018)
    at Qo.getHeadRequestInfo (brain.js:1:276880)
    at Qo.initTokenizer (brain.js:1:276669)
    at Object.rw [as tokenizer] (brain.js:1:277888)
    at cw (brain.js:1:279313)
    at ic (brain.js:7:3772)
    at brain.js:7:3419

Why is this happens and why the ?service_worker_authentication is added?

Could you please test youself the Lighttpd install and add a documentation about configuration

stokito commented 1 year ago

I used an incognito mode in Chrome. But now tried with a regular mode and it worked. Maybe it's related to some service worker settings.

icidasset commented 1 year ago

👋 Thanks for creating an issue and trying this out!

First of all I had to enable the CORS headers not just for OPTIONS methods but for all requests

Maybe I'm interpreting this sentence wrong, but this seems correct, you need CORS enabled on every method except OPTIONS (I think the browser sends the OPTIONS request to see what other methods can be called)

?service_worker_authentication

Glad you figured it out, it's indeed related to the service worker. If you see this query parameter in the failing request URL, that means the service worker isn't picking it up like it is supposed to. Maybe the service worker doesn't get activated for some reason in incognito mode? 🤔

I'll try it out in incognito mode myself when I have some spare time 👍 Is everything working correctly now for you when not using incognito mode?

PS. Just so you know why the service worker is needed: The service worker is responsible for doing authentication via the Authorization HTTP header. We can't do this directly because we're using the <audio> HTML element and you can only give it a URL.

stokito commented 1 year ago

Thank you for the quick response. Looks like all resources must have the Access-Control-Allow-Origin and Access-Control-Allow-Credentials headers. I updated my gist with the fixes. So I'll close the ticket. But still it would be great to add a how-to for the Lighttpd.

Also I had a minor problem: when the webdav directory doesn't have a trailing slash the webserver responds with 301 redirect and this breaks the scanning. E.g. when /Music is used instead of /Music/. Please add the slash, it should save less experienced users.