Lokalny serwer HTTP: Proste sposoby na problemy z file:///

Po co Ci lokalny serwer HTTP? Bardzo wiele osób skarży się mi na dziwne problemy z aplikacjami. Błędy są przeróżne, a często mają wspólne źródło: Próba otwarcia pliku .html w przeglądarce przez file:// i brak serwera HTTP.

Błędy protokołu file://

Przykładem błędu, na który często skarżą się czytelnicy jest:

XMLHttpRequest cannot load file://……
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource

lub

Failed to load http://…: The 'Access-Control-Allow-Origin' header has a value 'null' that is not equal to the supplied origin. Origin 'null' is therefore not allowed access.

Wynika to z ograniczeń bezpieczeństwa nałożonych przez przeglądarkę.

Inny popularny błąd po prostu niepoprawne ścieżki:

GET file:///……… net::ERR_FILE_NOT_FOUND

Wynika to najczęściej z tego, że aplikacja została zbudowana z pewnymi założeniami co do adresu (folderu, ścieżki) pod którym się znajduje. Natomiast gdy próbujesz uruchomić ją prosto z dysku, to ścieżka jest zupełnie inna — zależna od tego gdzie umieściłaś/eś plik.

Rozwiązanie: Serwer HTTP

Nie będziemy mówić o hackowaniu Chrome’a 😉 Tylko o prawdziwym rozwiązaniu problemu. Postaw lokalny serwer HTTP.

Jak? Nie, nie każę Ci instalować XAMPP-a 😂 Masz kilka opcji.

python 2 i SimpleHTTPServer

Mój ulubiony i najprostszy sposób to skorzystanie z pythona. Na MacOS jest on dostępny bez konieczności instalowania czegokolwiek. Wchodzę tylko do folderu, który chcę zaserwować i wpisuję:

python -m SimpleHTTPServer

Domyślnie strona będzie dostępna pod adresem http://0.0.0.0:8000. Numer portu można zmienić dodając jeden argument:

python -m SimpleHTTPServer 9999

python 3 i http.server

Analogiczny serwer w Pythonie 3 można szybko postawić korzystając z polecenia:

python3 -m http.server

Podobnie zmienia się numer portu:

python3 -m http.server 9999

node i http-server

Jeśli Twoim ulubionym środowiskiem jest Node.js, a ukochanym językiem JavaScript to na pewno masz już zainstalowany npmnpx, prawda? Jest paczka npm, która służy do uruchomienia prostego serwera HTTP. Znowu, wchodzę do folderu i wpisuję:

npx http-server

Strona będzie dostępna pod http://127.0.0.1:8081. Port zmienisz przełącznikiem -p:

npx http-server -p 9999

Ten serwer posiada bogate możliwości konfigurowania, więcej tutaj: npmjs.com/package/http-server#available-options

Jeśli uznasz, że http-server przyda Ci się częściej to warto go instalować globalnie na stałe:

npm install -g http-server

i potem już tylko:

http-server

Podsumowanie

Nie zagłębiałem się w teorię. Sama praktyka. Umiesz postawić swój własny serwer http i to dosłownie w kilka sekund. Mam nadzieję, że pomogłem 🙂 Zapamiętaj jedno z tych poleceń — mi się one przydają praktycznie codziennie!