Jeszcze jeden blog o programowaniu

Radosne twórczości leniwego programisty

Posts Tagged ‘django rest framework

CORS Headers – komunikacja VueJS i Django

leave a comment »

vuejs logoCross-Origin Resource Sharing (CORS) to mechanizm wykorzystujący dodatkowe nagłówki HTTP pozwalające różnym agentom (np. przeglądarkom) na dostęp do zasobów znajdujących się na innej domenie, porcie czy protokole niż aktualna. 

Na potrzeby wpisu zakładam, że framework (Django) i biblioteki (Vue.js i axios) z których będziemy korzystać – mamy już zainstalowane w projekcie.

W projekcie Vue wprowadźmy następujące zmiany:

W pliku App.vue:

W pliku config/dev.env.js:

Pliki src/assets/logo.png i src/components/HelloWorld.vue możemy wyrzucić, jako w tej chwili nie używane.

W backendzie natomiast, w pliku views.py naszej aplikacji (movies):

i dodajemy routing dla naszej aplikacji w pliku urls.py (plik ten domyślnie nie istnieje i należy go utworzyć):

Następnie dokunujemy zmian w plikach urls.py – głównym pliku routingu całego projektu Django:

oraz settings.py:

Startujemy serwery poniższymi poleceniami w odpowiednich katalogach:

Uruchamiamy przeglądarkę i otwieramy 2 zakładki. W pierwszej zweryfikujemy tylko, czy serwer Django zwraca prawidłową odpowiedź – JSON (http://127.0.0.1:8000) i jeśli tak, to od razu można ją zamknąć. W drugiej zakładce otwieramy narzędzia programisty i przechodzimy pod adres aplikacji Vue (http://127.0.0.1:8080).
Dziwne – w zakładce Network zobaczyć możemy, że żądanie GET do serwera się udało i nawet możemy podejrzeć zwrócone wyniki:

Czyli wszystko jest prawidłowo? No nie do końca niestety. O ile domena (host) – w tej sytuacji 127.0.0.1 nie są problemem – to sprawa komplikuje się właśnie w przypadku niezgodności portów i przeglądarka może nam w konsoli sypnąć następującym błędem:

Problem nasz rozwiązać możemy paczką django-cors-headers, jej instalacja nie odbiega za bardzo od instalacji innych paczek Pythona:

pip install django-cors-headers==2.1.0

Zmieniamy trochę w pliku settings.py (ale naprawdę ciut-ciut):

… restartujemy serwer Django i już, wchodząc na adres naszej aplikacji powinniśmy cieszyć się pobranymi z serwera danymi.

Wymagane paczki do postawienia projektu Django znajdują się  w katalogu backend/requirements/base.txt, natomiast całość kodu źródłowego bezpośrednio w repozytorium VueJS-Django-CORS.

Dla zainteresowanych można jeszcze poszukać informacji na temat Same Origin Policy.

Dodatkowe źródła (często z fajnymi obrazkami):

  1. MDN CORS
  2. Understanding CORS
  3. Understanding CORS: Cross-Origin Resource Sharing
  4. Understanding and using CORS

 

Written by Filip Górczyński

2018.02.09 at 13:42:07

%d blogerów lubi to: