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.

Błędy CORS a protokoł 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 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 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!

Nie wysyłamy spamu, tylko wartościowe informacje. W każdej chwili możesz się wypisać klikając „wypisz się” w stopce maila.

Subscribe
Powiadom o
guest
6 komentarzy
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
Anonymous Me
Anonymous Me
1 rok temu

Interesujaca porada, ktora na pewno wezme pod uwage. Duzo praktyczniejsza niz stawianie IISa w windowsie, czy tez inne dev webservery z VS, ale troche ten „protokol” file i „bledy protokolu” file kola w oczy. Polecam zapoznac sie z RFC 8089. file:// to nie protokol, i to nie sa „jego” bledy, ale tak jak napisales, takie a nie inne zachowanie przegladarki wynika z cross origin policy.

Anonymous Me
Anonymous Me
2 lat temu

Masz w 100% racje! Pogadam z nimi – pora to zmienic 😀

wojtiku
wojtiku
1 rok temu

Ja czasami używam też `php -S localhost:8888`. Chyba głównie dlatego, że łatwo to zapamiętać :).

Kamil Biedrzycki
1 rok temu

Polecam też https://github.com/zeit/serve 😉