Django csrf token + Angularjs

Cuando intentas consumir una API construida en Django desde el cliente Angular, y tienes el error cross-origin. Debes activar CORS en Django, y configurar Angular para que lo consuma y mande por defecto en todas las llamadas.

(Más info directamente en la documentación oficial de Django: https://docs.djangoproject.com/en/1.7/ref/contrib/csrf/#ajax )

Por tanto, vayamos por partes:

Primero, en Django:

Necesitamos instalar django-cors-headers (Y como siempre, agregarlo en nuestro requirements.txt).

Tenéis toda la info del paquete en: https://github.com/ottoyiu/django-cors-headers

pip install django-cors-headers

Además, debemos indicar a Django que hemos instalado django-cors-headers. Para ello, en nuestro settings.py debemos agregar varias cosas:

En el apartado INSTALLED_APPS:

INSTALLED_APPS = (
...
'corsheaders',
...
)

En el apartado MIDDLEWARE_CLASSES:

MIDDLEWARE_CLASSES = (
...
'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.CommonMiddleware',
...
)

Configurando django-cors-headers

Ahora, debes agregar los hosts a los que quieres permitir realizar peticiones a la API en CORSORIGINWHITELIST. También puedes poner CORSORIGINALLOW_ALL a True para permitir el acceso desde cualquier host (No recomendable).

CORS_ORIGIN_ALLOW_ALL: Si está a True, ignorará la whitelist y permitirá peticiones desde cualquier host.CORS_ORIGIN_WHITELIST = (
'frontend.algargar.com',
'otrositio.example.com'
)

Con esto, tenemos el lado backend solucionado. Pasamos ahora al lado AngularJS.

Segundo, en Angular:

En nuestro archivo app.js tenemos que añadir las siguientes dos lineas con httpProvider, hay que acordarse de pasar el httpProvider como argumento de la función.

.config(function ($routeProvider,$httpProvider) {      $httpProvider.defaults.xsrfCookieName = 'csrftoken';      $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';  });

Con esto, pasamos siempre en las cabeceras de nuestras llamadas el CRSFTOKEN, ahora ya debería estar solucionado el problema y podremos hacer peticiones al backend.

La solución del lado AngularJS, salió de:http://stackoverflow.com/questions/18156452/django-csrf-token-angularjs

Eso es todo, espero que os sea útil. Si tenéis cualquier duda, o sugerencia para mejorar esta info, podéis encontrarme en twitter o enviarme un email :-)

Saludos!
Alberto.

(Post extraído de: http://blog.algargar.com/2015/09/04/django-csrf-token-angularjs/ )

--

--

--

Everbody knows that we must carry out 3 tasks in life: coding well, plant a cactus and have a good design. Digital Agency. hello@wearecactus.com

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
We Are Cactus

We Are Cactus

Everbody knows that we must carry out 3 tasks in life: coding well, plant a cactus and have a good design. Digital Agency. hello@wearecactus.com

More from Medium

Introduction to Django Framework

introduction to Django Framework

Django & Postman: 403 CSRF verification failed?

Django!

Django Forms Unchained