Estoy intentando construir un SPA completo usando Vue.js como mi front-end y Django como mi back-end. Estos sistemas son completamente independientes (no son una aplicación híbrida con la página index.html servida por el back-end).
Creé un directorio de services en mi proyecto generado por Vue-CLI que proporciona la accesibilidad general para mi API REST a través del archivo api.js (contenido a continuación):
import axios from "axios"; import Cookies from "js-cookie"; axios.defaults.xsrfHeaderName = "X-CSRFToken"; axios.defaults.xsrfCookieName = "csrftoken"; const BackEnd = "http://127.0.0.1:8000/"; //local backend from manage.py runserver export default axios.create({ baseURL: `${BackEnd}api/`, timeout: 5000, headers: { "Content-Type": "application/json", "X-CSRFToken": Cookies.get('csrftoken') } });¿Cómo sé que hay tal token para obtener? Escribí un punto final de API que proporciona el token en los encabezados de respuesta (que se muestra a continuación):
Access-Control-Allow-Origin: * Content-Length: 77 Content-Type: application/json Date: Sun, 19 Jul 2020 18:04:06 GMT Server: WSGIServer/0.2 CPython/3.7.6 Set-Cookie: csrftoken=HdM4y6PPOB44cQ7DKmla7lw5hYHKVzTNG5ZZJ2PqAUWE2C79VBCJbpnTyfEdX3ke; expires=Sun, 18 Jul 2021 18:04:06 GMT; Max-Age=31449600; Path=/; SameSite=Lax Vary: Cookie, Origin X-Content-Type-Options: nosniff X-Frame-Options: DENY Si bien mi Django REST Framework API está creando un trabajo que proporciona todos los datos para mis solicitudes GET , parece que no puedo asignar el csrftoken correctamente para autenticar mis solicitudes POST . Incluso con el encabezado X-CSRFToken configurado correctamente en mi solicitud de axios, sigo recibiendo la respuesta típica 403 (cookie CSRF no configurada) del servidor
Accept: application/json, text/plain, */* Accept-Encoding: gzip, deflate, br Accept-Language: en-US,en;q=0.9 Connection: keep-alive Content-Length: 247 Content-Type: multipart/form-data; boundary=----WebKitFormBoundary9vOu1sBaQrXtXseR DNT: 1 Host: 127.0.0.1:8000 Origin: http://127.0.0.1:8080 Referer: http://127.0.0.1:8080/ Sec-Fetch-Dest: empty Sec-Fetch-Mode: cors Sec-Fetch-Site: same-site User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.89 Safari/537.36 X-CSRFToken: T2Z7pzxKTAuCvBEIjkgRf8RGEEVLYfOyDYkYIcfkWCfSkPB76wCjMMizZvdTQPKg Bueno, ahora esto es sólo un dolor! Tengo un valor de token diferente en A) el encabezado de respuesta Set-Cookie, B) el valor para csrftoken en las cookies de mi navegador y C) en la solicitud POST de axios. ¿Alguien puede ayudarme a averiguar qué está pasando aquí?
Simplemente usé esto en mi aplicación vue, y todo funcionó sin problemas.
axios.defaults.xsrfCookieName = 'csrftoken'; axios.defaults.xsrfHeaderName = 'X-CSRFToken'; axios({ method: 'post', url: 'http://127.0.0.1:8000/api/orders-update', xstfCookieName: 'csrftoken', xsrfHeaderName: 'X-CSRFToken', data: updateIDs, headers: { 'X-CSRFToken': 'csrftoken', } }).then(response => console.log(response));