Estoy usando la solicitud ajax para enviar POST pero obtuve la respuesta 403 debido a csrf_token. Divido el frontend solo usando Vuejs y el backend usando Django solo para responder a la API, así que no puedo usar la plantilla de Django para representar {% csrf_token %} o tener csrftoken en la sesión para usar getcookie('csrftoken') como en la recomendación del documento de Django. ¿Hay alguien que enfrente este problema como yo y tenga algunas soluciones? Así que gracias si me pueden ayudar con esto.
Puede configurar el token CSRF en el encabezado de su solicitud AJAX. Por ejemplo, si usa la biblioteca jquery y jquery.cookie, puede recuperar fácilmente la cookie Django-set csrftoken de la siguiente manera:
$.ajax({ url : 'YOUR_URL_HERE', headers: {'X-CSRFToken': $.cookie('csrftoken')}, type: 'POST', dataType: 'json', data: {}, success: function() { }, error: function(xhr, errMsg, err) { }, });La documentación de Django también incluye una sección sobre esto: https://docs.djangoproject.com/en/1.11/ref/csrf/#ajax
Tenga en cuenta que esta solución puede depender de su configuración específica de Django. El enlace de documentación de Django anterior detalla todo con bastante claridad.
EDITAR:
Dado que incluso su solicitud de página inicial no es atendida por Django, así es como puede lograr lo que está buscando...
1.) Cree una vista en su aplicación Django que genere y devuelva manualmente un token CSRF (usando django.middleware.csrf.get_token ):
def get_csrf_token(request): token = django.middleware.csrf.get_token(request) return JsonResponse({'token': token})2.) También necesitaría agregar una entrada apropiada en su archivo de URL de Django:
url(r'^get-token/$', get_csrf_token)
3.) Luego, su aplicación Vue.js puede obtener el token CSRF usando este punto final. No es necesario que sea un evento iniciado por el usuario; por ejemplo, puede configurar su aplicación de front-end para buscarla en el evento $(document).ready() . Luego, usando su biblioteca AJAX preferida (estoy usando jQuery en mi ejemplo):
$.ajax({ url: '/get-token/', type: 'GET', dataType: 'json', success: function(data) { $.cookie('csrftoken', data.token); // set the csrftoken cookie } }); 4.) Ahora su cookie csrftoken está configurada y debería poder usarse para solicitudes POST posteriores.
$.ajax({ url : 'YOUR_URL_HERE', headers: {'X-CSRFToken': $.cookie('csrftoken')}, type: 'POST', dataType: 'json', data: {}, success: function() { }, error: function(xhr, errMsg, err) { }, });He usado jQuery para la funcionalidad AJAX y la biblioteca jQuery.cookie para obtener y configurar cookies, pero, por supuesto, puede usar la biblioteca que prefiera para estas funciones.
Esto va a ser tremendamente impopular, pero he descubierto que es una forma relativamente simple, segura y discreta de separar el front-end/backend.
En su aplicación VueJS, probablemente tenga una redirección de inicio de sesión cuando el usuario intenta acceder a una página y no está autenticado.
Entonces, en lugar de enviarlo a una página de enrutador vue, rediríjalo a /cuenta/inicio de sesión/ (o alguna ruta de la aplicación django; coloque una excepción en el frente de la nube, o proxy nginx para /cuenta/inicio de sesión/ para pase de proxy a django) - luego en la plantilla login.html, solo use javascript window.location.href para su página de inicio de sesión de vueJS / inicio de sesión
El csrf_token se configurará como una cookie segura HttpOnly (que es lo que desea), y la interrupción para el usuario es tan mínima que ni siquiera justifica la preocupación.
De acuerdo con la documentación de Django , simplemente puede usar el decorador ensure_csrf_cookie en una vista y eso enviará la cookie con el token con la respuesta.