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