Permalänk
Medlem

Lokal reverse proxy

Jag har en NUC som jag använder som en mediaserver hemma. Jag har installerat LMS (Lightweight Music Server) som är själv-hostad musiktjänst. Tjänsten bygger på Subsonic och deras API vilket gör det möjligt att göra anrop till tjänsten och få tillgång till musikbiblioteket.

Jag vill testa att bygga min egna front end till LMS genom Vue och har påbörjat liknande projekt som också varit baserade på Subsonic API:t. Det som är extra bra med LMS är att det verkar behandla organiseringen av artister på ett sätt som jag är ute efter.

Tidigare försök har jag inte haft några problems alls att göra anrop till API:t, men just i fallet LMS så får jag CORS errors. Efter lite undersökning så verkar det beror på att servern som kommer inbäddad med LMS inte har några CORS-headers satta. Jag har därför fått rekommendationen att sätta upp en reverse proxy som skulle serva LMS genom en annan port och därmed göra det möjligt att lägga till CORS-headers på proxyn istället för att komma runt detta.

API:t går att nå genom 192.168.0.15:5083/rest på mitt nätverk.

Jag har satt upp LMS genom Docker och docker-compose.yml. Jag har ingen aning hur jag ska gå till väga, men det jag ser framför mig att jag vill åstadkomma är:

  1. Skapa en reverse proxy-server som servar porten 5083 på en ny port, enbart lokalt på mitt nätverk. Så om jag i nuläget kan nå API:t via 192.168.0.15:5083/rest så vill jag kunna nå samma API via 192.168.0.15:<ANNAN PORT>.

  2. Lägga till CORS-headers på denna proxy-server som tillåter all form av cross-origin.

Varför jag är noga med att nämna att det bara behöver fungera lokalt är för att många exempel med reverse proxy-servrar verkar anta att den ska vara kopplad till en publik domän, med TLS-certifikat och liknande. Jag skulle för nu vara väldigt nöjd om den bara gick att nå genom en port på min lokala IP-adress och inte en domän.

Hur ska jag ta mig an detta?

Permalänk
Medlem

Jag skulle sätta upp en server som har följande regel:

  1. Alla request som börjar på /rest/ skickas vidare till 192.168.0.15:5083/rest/ (proxy)

  2. Övriga request servas enligt din frontends behov (serva HTML-filer, JS, CSS, bilder, etc)

I Vue-applikationen kan du då göra request till /rest/foo/bar utan att skriva någon domän eller port i början. Det gör att alla request går till samma origin, så du inte behöver tänka på CORS över huvud taget.

Permalänk
Medlem

Om du är bekant med Node.js och vill ha något som funkar bara för dig själv är CORS Anywhere fullt fungerande.

Det är några få rader kod och en process att hålla igång.

Din webb-app anropar sedan CORS Anywhere på typ http://localhost:8080/192.168.0.15:5083/rest, om du sätter upp CORS Anywhere på port 8080 på localhost.

Permalänk
Medlem
Skrivet av KAD:

Om du är bekant med Node.js och vill ha något som funkar bara för dig själv är CORS Anywhere fullt fungerande.

Det är några få rader kod och en process att hålla igång.

Din webb-app anropar sedan CORS Anywhere på typ http://localhost:8080/192.168.0.15:5083/rest, om du sätter upp CORS Anywhere på port 8080 på localhost.

Yes, jag har använt CORS Anywhere tidigare för API:er som är tillgängliga online. Men jag kan alltså köra detta lokalt och få samma effekt? Testade att använda deras demo-URL, men antar att det inte fungerar med localhost då jag inte fick någon respons.

Edit: Jag testade bara att köra URL:en direkt i webbläsaren, men då skickas inte "Origin"-headern med, varför jag fick ett felmeddelande. När jag gör anropet via JavaScript så tror jag att Origin fylls i automatiskt, så det funkar nu när jag kör CORS Anywhere på servern. Tack!