Django csrf token + Angularjs

We Are Cactus
Sep 15, 2015 · 2 min read

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/ )

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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