Kilka dni temu spróbowałam uruchomić swój wcale niestary projekt i spotkało mnie niemiłe zaskoczenie - mój plugin do Google Chrome, Allow CORS, przestał działać po aktualizacji przeglądarki! Ile razy bym nie klikała w jego ikonkę, efekt mojego requestu wysyłanego do localhost zawsze stanowił czerwony błąd w konsoli narzędzi deweloperskich. Rozwiązanie problemu okazało się trywialne, więc tym bardziej postanowiłam napisać o tym krótką notkę.
CO TO JEST CORS?
CORS, a tak naprawdę Cross-Origin Resource Sharing to mechanizm, który używa specjalnego nagłówka HTTP. Nagłówek określa czy aplikacja działająca na pewnej domenie może korzystać z zasobów serwera w innej lokalizacji. Lokalizacja danego zasobu składa się z protokołu, domeny oraz portu - wszystkie muszą być zbieżne, aby nagłówek CORS nie był potrzebny.
Wprowadzenie CORS miało oczywiście na celu zwiększenie bezpieczeństwa w sieci. Najprostszym rozwiązaniem problemów z tym mechanizmem, możliwym do zastosowania w czasie developmentu, kiedy aplikację testujemy tylko lokalnie, jest użycie odpowiedniej wtyczki do przeglądarki. Jak już wiecie - u mnie to rozwiązanie zawiodło.
MÓJ PRZYPADEK
Program, który sprawił mi problemy, jest bardzo prostą aplikacją RESTową. Frontend napisany został we frameworku Backbone.js, a backend w Express.js. Jedyną rolą aplikacji jest zaciągnięcie poprzez request dużej liczby danych z pliku JSON i dynamiczne wyrenderowanie widoku z nimi. Nie ma żadnych wodotrysków, bo jedynym celem projektu jest porównanie wydajności różnych frameworków.
URUCHOMIENIE APLIKACJI LOKALNIE
Początkowo w celu uruchomienia części frontendowej, wystarczyło otworzyć z przeglądarki plik index.html, a magia działa się sama. Serwer w Expressie działał natomiast lokalnie na określonym porcie.
Pierwszym krokiem do naprawy mojego problemu, było uruchomienie także frontu na localhost. Pomógł mi w tym Node.js i jego bardzo prosty pakiet http-server:
npm install http-server -g
http-server . -p 8000
http-server . -p 8000
Powyższe polecenie instaluje pakiet i uruchamia aplikację na localhost:8000. Oczywiście 8000 to inny port niż ten, na którym działa w tym czasie backend.
JAK DODAĆ NAGŁÓWEK CONTROL-ALLOW-ORIGIN?
Istnieje kilka sposobów, aby w aplikacji rozwiązać problem, z którym musiałam się zmierzyć. Jest to możliwe zarówno z poziomu frontu, jak i serwera. Zdecydowałam się na to drugie rozwiązanie, bo w przypadku Express.js jest to bardzo proste. Wystarczy dodać:
// fix for CORS issue
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "http://localhost:8000")
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept")
next()
})
W linkach poniżej zamieszczam między innymi listę takich szybkich fixów ze strony enable-cors.org.
To naprawdę wszystko! Szukając optymalnego rozwiązania dla kłopotów z CORS zauważyłam, że pytanie o naprawienie tego problemu pada bardzo często. Będzie mi bardzo miło, jeżeli w komentarzach dacie znać, czy było Wam dane się z nim mierzyć i jak daliście sobie radę?
Komentarze
Prześlij komentarz
Komentarze są moderowane. Nie ma cenzury, bronię się przed spamem. :)