Как использовать axios для потребления API Rest в Django, а именно метод list в Model ViewSet?
Выпьем,
Я пытаюсь сделать запрос из Vue.js через axios в Django, но консоль показывает ошибку в доступе к XMLHttpRequest. Вот эта ошибка: enter image description here
Мой код в Vue.js выглядит следующим образом:
<template>
<div class="main_container_cita">
<div class="panelIzquierdoCita">
<div class="panelVerticalCita">
<img src="../img/cita.png" alt="">
<h1>Mis citas</h1>
</div>
</div>
<div class="panelDerechoCita" id="panelDerechoCita">
<table>
<tr>
<td>Fecha</td>
<td>Hora</td>
<td>Lugar</td>
<td>Cliente</td>
<td>Servicio</td>
</tr>
<tr v-for="(cita, index) in citas" :key="index">
<td v-text="cita.fecha"></td>
<td v-text="cita.hora"></td>
<td v-text="cita.lugar"></td>
<td v-text="cita.cliente"></td>
<td v-text="cita.servicio"></td>
</tr>
</table>
</div>
</div>
</template>
<script>
import axios from "../utils/axios";
export default {
name: "Cita",
data: function () {
return {
citas: []
}
},
methods: {
getCita: async function(){
await this.verifyToken();
let token = localStorage.getItem("token_access");
axios.get(`cita`, {headers: {"Authorization": `Bearer ${token}`}})
.then(result => {
this.citas = result.data
}).cath((error)=>{
alert('Erorr en el get',error)
})
},
verifyToken: function(){
let refresh = localStorage.getItem("token_refresh");//recuperar datos del LocalStorage
return axios.post("refresh/", {refresh})
.then(result => {
localStorage.setItem("token_access", result.data.access)
}).catch(()=>{
this.$emit("logout");
})
}
},
mounted(){
this.getCita();
}
};
</script>
В конечном итоге мой код в Django выглядит следующим образом:
class CitaView(viewsets.ModelViewSet):
serializer_class = CitaSerializer
queryset = Cita.objects.all()
permission_classes = (IsAuthenticated,)
def list(self, request):
serializer = CitaSerializer(self.queryset.order_by("fecha").filter(cliente=1), many=True)
return Response({'data': serializer.data})
Я буду надеяться на ответы, мне нужно завершить проект.