[DjangoRest + React]: Can't delete items and problems posting (error 403 and 301)


I’m building a very simple react + django website. Everything was going fine until today I made some changes to both the backend and frontend to add a third app that displays dummy pictures with a description.

Up until that point, I was using axios to make get, post and delete requests with no trouble. I just wrote axios.post("api/", item) and it would post the item, or axios.delete(api/{props.id}) and the item would be deleted.

Now, none of these work. At first I started getting 403 errors. Doing some troubleshooting, I tried adding the full url to see if it worked. Post worked. axios.post("localhost:8000/api/", item) now posts the item. The thing is that when I try to delete – axios.delete(localhost:8000/api/{props.id}) -, I get a 301 error.

Besides kicking myself for not backing up before, what can I do? These are the backend and frontend codes.


import React, { useEffect, useState } from "react";

import Header from "./UI/Header";
import NewTask from "./tasks/NewTask";
import TaskList from "./tasks/TaskList";
import axios from "axios";

import classes from "./ToDo.module.css";

function ToDo(props) {
  const [taskList, setTaskList] = useState([]);

  const refreshList = async () => {
    await axios.get("todo/").then((res) => {
      const filteredData = res.data

  useEffect(() => refreshList, []);

  const addTaskHandler = async (title, description) => {
    let item = {
      title: title,
      description: description,
      completed: false,

    await axios
      .post(`todo/`, item)
      .then((res) => {refreshList()})
      .catch((err) => console.log(err));

  const onCompleteHandler = async (item, id) => {
    await axios
      .post(`/todo/${id}`, item)
      .then(() => refreshList());



  const onDeleteHandler = async (id) => {

    await axios
      .then(() => {

  return (
    <div className={classes[props.display]}>
      <NewTask onAdd={addTaskHandler}></NewTask>
      <TaskList list={taskList} onDelete={onDeleteHandler} onComplete={onCompleteHandler}></TaskList>

export default ToDo;



Django settings for backend project.

Generated by 'django-admin startproject' using Django 4.0.4.

For more information on this file, see

For the full list of settings and their values, see

from pathlib import Path
import os

# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent



ROOT_URLCONF = 'backend.urls'


DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

# CORS whitelist for React server







from django.contrib import admin
from django.urls import path, include
from rest_framework import routers
from web import views

from django.conf.urls.static import static
from django.conf import settings

router = routers.DefaultRouter()
router.register(r'cars', views.CarView, 'car')
router.register(r'todo', views.ToDoView, 'todo')
router.register(r'dummy', views.DummyView, 'dummy')

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include(router.urls)),
    # path('/dummy/', './static/'), 
]+ static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)


from django.db import models

# Create your models here.

class Car(models.Model):
    brand = models.CharField(max_length=250)
    make = models.CharField(max_length=250)
    plate = models.CharField(max_length=10)
    year = models.IntegerField()

    def __str__(self):
        return self.brand + " " + self.plate

class ToDo(models.Model):
    title = models.CharField(max_length=250)
    description = models.CharField(max_length=500)
    completed = models.BooleanField(default=False)

    def __str__(self):
        return self.title

class Dummy(models.Model):
    name = models.CharField(max_length=250)
    description = models.CharField(max_length=500)
    pic = models.ImageField(
        upload_to= 'images/', default='images/default.jpg')

    def __str__(self):
        return self.name


  from rest_framework import serializers
from .models import Car, ToDo, Dummy

class CarSerializer(serializers.ModelSerializer):
    class Meta:
        model = Car
        fields = ('id', 'brand', 'make', 'plate', 'year')

class ToDoSerializer(serializers.ModelSerializer):
    class Meta:
        model = ToDo
        fields = ('title', 'description', 'completed', 'id')

class DummyPicSerializer(serializers.ModelSerializer):
    class Meta:
        model = Dummy
        fields = ('name', 'description', 'pic', 'id')


from django.shortcuts import render
from django.http import HttpResponse
from rest_framework import viewsets
from .serializers import CarSerializer, ToDoSerializer, DummyPicSerializer
from .models import Car, ToDo, Dummy

# Create your views here.

def index(request):
    return HttpResponse("Hello world. This works now!")

class CarView(viewsets.ModelViewSet):
    serializer_class = CarSerializer
    queryset = Car.objects.all()

class ToDoView(viewsets.ModelViewSet):
    serializer_class = ToDoSerializer
    queryset = ToDo.objects.all()

class DummyView(viewsets.ModelViewSet):
    serializer_class = DummyPicSerializer
    queryset = Dummy.objects.all()


I’ve just deleted all my migrations and database and redid the whole makemigrations-migrate deal with Django and suddenly it just works.

Maybe it had to do something with the way it was previously migrated? I’ll never know.

Answered By – Pedro Henestroza

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published