search

peguerosdc / subplayer

A music player frontend compatible with Subsonic backends
https://subplayer.netlify.app/
GNU General Public License v3.0
86 stars 11 forks source link

Can't use Subplayer outside my own network. #35

Closed Rick1029 closed 3 years ago

Rick1029 commented 3 years ago

Hi! I've been looking around for a web subsonic client to use with Navidrome and have been liking SubPlayer. Both Navidrome and SubPlayer are hosted on a Raspberry Pi, both exposed to the internet through nginx. An issue I've noticed though is it seems that logging in only accepts HTTP, and connects to the server from the clients side (the browser accessing SubPlayer.) This means that at home, I can point SubPlayer on the browser to connect to 192.168.0.x:xxxx — the server hosting Navidrome. However, if I connect to SubPlayer through nginx on subplayer.mydomain.com, either from my network or another, there is no way to connect it to Navidrome as it connects to the server through the client (and subplayer.mydomain.com cannot see a LAN address.)

I assume the solution here would be either to allow SubPlayer to connect to HTTPS, so I can point it to navidrome.mydomain.com, or move connecting to Navidrome from the client to SubPlayer on the server.

peguerosdc commented 3 years ago

Hi! Thanks for trying Subplayer!

If I understand correctly, I am afraid this is a CORS issue and no fix would be possible any time soon.

Long story (if someone gets here and doesn't know what this means): As you correctly pointed out, the connection is made from the client and browsers block all requests made to different domains (i.e. subplayer.mydomain.com can only fetch data from subplayer.mydomain.com) for security reasons. It is possible to bypass this security policy if Subplayer specifically asks for it in its requests to the server, but (in this case) Navidrome would have to explicitly say it's 0k in its responses, which doesn't do at the moment and it's perfectly understandable if @deluan doesn't want to implement it. Anyway, it wouldn't have much sense to patch this up as it would still depend on the server's implementation to work.

A "fix" would be to add a backend to Subplayer to serve as a middle man (and tbh it doesn't sound as a bad idea as many people will probably encounter this same issue), but right now I don't have the time for such an endeavour ☹.

I'll keep it in the back of my mind for a future release.

deluan commented 3 years ago

I'm not sure if I understand the issue correctly, so I'm throwing some random thoughts here, that may help.

I don't think the issue is related to CORS... I can connect the SubPlayer demo instance (https://subplayer.netlify.app/) to my Navidrome server using HTTPS without any issue. Maybe the issue your are seeing is related to mixed content (trying to connect to Navidrome over HTTP from SubPlayer loaded from HTTPS)?

Also keep in mind that Navidrome does not handle HTTPS on port 4533, only HTTP, so an address like https://192.168.X.X:4533 is invalid. HTTPS needs to be handled by the Nginx server.

@Rick1029 Can you directly connect to Navidrome over HTTPS outside your network? If you can, that should be the address you use to login using SubPlayer (when it is also loaded from HTTPS)

Can you see any errors in the browser console, in the network tab, when SubPlayer tries to talk to Navidrome?

Rick1029 commented 3 years ago

I can connect to Navidrome outside my network at https://navidrome.mydomain.com. Nginx is setup properly to serve both SubPlayer and Navidrome on https. To connect to Navidrome with SubPlayer on my local network, I would type in http://192.168.x.x:3003 (Navidrome port) completely bypassing Nginx. I also access SubPlayer with the LAN IP 192.168.x.x:5000. Browsing SubPlayer through my domain does not allow me to connect to Navidrome with its LAN IP nor the domain, I can only use SubPlayer with Navidrome when both are accessed with a LAN IP. Trying to access Navidrome through Nginx with my domain on SubPlayer doesn’t work, it gives me a network or object error.

deluan commented 3 years ago

Using https://subplayer.mydomain.com to access http://192.168.x.x:3003 will not work, because of mixed content. When using https://subplayer.mydomain.com you should be able to connect to https://navidrome.mydomain.com, though.

Can you try connecting to the Navidrome demo instance, https://demo.navidrome.org from your https://subplayer.mydomain.com? I just tested it with the hosted SubPlayer (https://subplayer.netlify.app) and it works perfectly

Rick1029 commented 3 years ago

Reinstalling Navidrome and Subplayer seems to have done the trick, not sure what was up with it earlier. Its working fine from my domains now — I appreciate the help!

peguerosdc commented 3 years ago

@deluan thanks for stepping in! I tried accessing from SubPlayer/Netlify to Subsonic's demo server but got a CORS error, so I thought it was happening the same in here. Thanks for your help!

And I am glad it's working now @Rick1029 !

As a comment, if in SubPlayer you try host=https://demo.navidrome.org/ you won't be able to access. You need to put https://demo.navidrome.org (without the last slash). I'll add a check in the code to avoid trying to fetch from <host>//<path>.