Proyecto cliente SPA para la API de películas con Nuxt.js

Peticiones CORS a la API de Django

El error nos está indicando que el servidor Django no está configurado para aceptar el intercambio de recursos de origen cruzado o CORS (Cross-origin resource sharing en inglés). En otras palabras, pese a que el cliente y la API se ejecutan en la misma ip local 127.0.0.1, al estar en puertos diferentes no se permite el acceso.

Para solucionarlo deberemos hacer un inciso y modificar nuestro servidor para permitir las peticiones desde la URL 127.0.0.1:3000 que es donde se ejecuta el cliente en desarrollo.

Lo único que tendremos que hacer es instalar y configurar una app de Django llamada Django Cors Headers:

pipenv install django-cors-headers==2.4.0

Ahora tenemos que activarla y configurarla en el settings.py añadiendo en la lista blanca la ip o dominios donde queremos permitir CORS:

INSTALLED_APPS = (  ...
  'corsheaders',
)

MIDDLEWARE = [  ...
  'corsheaders.middleware.CorsMiddleware',
  'django.middleware.common.CommonMiddleware',
]

CORS_ORIGIN_WHITELIST = (
  'localhost:3000',
  '127.0.0.1:3000'
)

Un vez configurados los cors headers si actualizamos la página del cliente ya debería cargar los datos, lo podemos comprobar en el apartado Network del inspector de Chrome.