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.