Skocz do treści

Już wkrótce odpalamy zapisy na drugą edycję next13masters.pl. Zapisz się na listę oczekujących!

Serwer HTTP lokalnie: Sposób na problemy z CORS i 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 np. nawiązujące do magicznego „CORS”, a często mają wspólne źródło: Próba otwarcia pliku .html w przeglądarce przez file:// i brak serwera HTTP.

Zdjęcie Michał Miszczyszyn
JavaScript6 komentarzy

Błędy CORS a protokół 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. Brakuje serwera HTTP.

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 HTTP 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

Serwer HTTP w node i http-server

Jeśli Twoim ulubionym środowiskiem jest Node.js, a ukochanym językiem JavaScript to na pewno masz już zainstalowany npm i npx, 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 HTTP 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

HTTPS

Przy okazji muszę wspomnieć, że o ile lokalnie możesz używać HTTP, to jednak na produkcji na pewno powinnaś(-eś) mieć HTTPS! To jest absolutnie niezbędne. Przeczytaj, dlaczego Twoja strona musi używać HTTPS.

Podsumowanie

Nie zagłębiałem się w teorię. Sama praktyka (podobnie zresztą, jak na naszych szkoleniach z programowania). Umiesz postawić swój własny serwer http i pozbyć się problemu z CORS, a to wszystko dosłownie w kilka sekund. Mam nadzieję, że pomogłem :) Zapamiętaj jedno z tych poleceń — mi się one przydają praktycznie codziennie!

👉  Znalazłeś/aś błąd?  👈Edytuj ten wpis na GitHubie!

Autor