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!