title: [DjangoRest + React]: Can't delete items and problems posting (error 403 and 301)
body: <p>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.</p>
  <p>Up until that point, I was using axios to make get, post and delete requests with no trouble. I just wrote axios.post(&quot;api/&quot;, item) and it would post the item, or axios.delete(<code>api/{props.id}</code>) and the item would be deleted.</p>
  <p>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(&quot;localhost:8000/api/&quot;, item) now posts the item. The thing is that when I try to delete - axios.delete(<code>localhost:8000/api/{props.id}</code>) -, I get a 301 error.</p>
  <p>Besides kicking myself for not backing up before, what can I do? These are the backend and frontend codes.</p>
  <p>Frontend:</p>
  <pre><code>import React, { useEffect, useState } from &quot;react&quot;;
  
  import Header from &quot;./UI/Header&quot;;
  import NewTask from &quot;./tasks/NewTask&quot;;
  import TaskList from &quot;./tasks/TaskList&quot;;
  import axios from &quot;axios&quot;;
  
  import classes from &quot;./ToDo.module.css&quot;;
  
  function ToDo(props) {
    const [taskList, setTaskList] = useState([]);
  
    const refreshList = async () =&gt; {
      await axios.get(&quot;todo/&quot;).then((res) =&gt; {
        const filteredData = res.data
        setTaskList(filteredData);
      });
    };
  
    useEffect(() =&gt; refreshList, []);
  
    const addTaskHandler = async (title, description) =&gt; {
      let item = {
        title: title,
        description: description,
        completed: false,
      };
  
      await axios
        .post(`todo/`, item)
        .then((res) =&gt; {refreshList()})
        .catch((err) =&gt; console.log(err));
    };
  
  
    const onCompleteHandler = async (item, id) =&gt; {
      console.log(id)
      await axios
        .post(`/todo/${id}`, item)
        .then(() =&gt; refreshList());
  
      console.log('ToDo')
  
    }
  
    const onDeleteHandler = async (id) =&gt; {
  
      await axios
        .delete(`/todo/${id}`)
        .then(() =&gt; {
          refreshList()
        })
    };
  
    return (
      &lt;div className={classes[props.display]}&gt;
        &lt;Header&gt;&lt;/Header&gt;
        &lt;NewTask onAdd={addTaskHandler}&gt;&lt;/NewTask&gt;
        &lt;TaskList list={taskList} onDelete={onDeleteHandler} onComplete={onCompleteHandler}&gt;&lt;/TaskList&gt;
      &lt;/div&gt;
    );
  }
  
  export default ToDo;
  </code></pre>
  <p>Backend:</p>
  <p>settings.py</p>
  <pre><code>...
  &quot;&quot;&quot;
  Django settings for backend project.
  
  Generated by 'django-admin startproject' using Django 4.0.4.
  
  For more information on this file, see
  https://docs.djangoproject.com/en/4.0/topics/settings/
  
  For the full list of settings and their values, see
  https://docs.djangoproject.com/en/4.0/ref/settings/
  &quot;&quot;&quot;
  
  from pathlib import Path
  import os
  
  # Build paths inside the project like this: BASE_DIR / 'subdir'.
  BASE_DIR = Path(__file__).resolve().parent.parent
   
  INSTALLED_APPS = [
      'django.contrib.admin',
      'django.contrib.auth',
      'django.contrib.contenttypes',
      'django.contrib.sessions',
      'django.contrib.messages',
      'django.contrib.staticfiles',
      'corsheaders',
      'rest_framework',
      'web',
  ]
  
  MIDDLEWARE = [
      'django.middleware.security.SecurityMiddleware',
      'django.contrib.sessions.middleware.SessionMiddleware',
      'django.middleware.common.CommonMiddleware',
      'django.middleware.csrf.CsrfViewMiddleware',
      'django.contrib.auth.middleware.AuthenticationMiddleware',
      'django.contrib.messages.middleware.MessageMiddleware',
      'corsheaders.middleware.CorsMiddleware',
      'django.middleware.clickjacking.XFrameOptionsMiddleware',
      'django.middleware.common.CommonMiddleware',
  
  ]
  
  ROOT_URLCONF = 'backend.urls'
  </code></pre>
  <p>(...)</p>
  <pre><code>DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
  
  # CORS whitelist for React server
  
  CORS_ORIGIN_WHITELIST = [
      'http://localhost:3000'
  ]
  
  CORS_ALLOWED_ORIGINS = [
      'http://localhost:3000'
  ]
  
  CORS_ALLOW_METHODS = [
      &quot;DELETE&quot;,
      &quot;GET&quot;,
      &quot;OPTIONS&quot;,
      &quot;PATCH&quot;,
      &quot;POST&quot;,
      &quot;PUT&quot;,
  ]
  
  # CORS_ALLOW_ALL_ORIGINS = True
  
  CSRF_TRUSTED_ORIGINS = [
          'http://localhost:3000',
      ]
  </code></pre>
  <p>urls.py</p>
  <pre><code>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)
  </code></pre>
  <p>models.py</p>
  <pre><code>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 + &quot; &quot; + 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
  </code></pre>
  <p>serializers.py</p>
  <pre><code>  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')
  </code></pre>
  <p>views.py</p>
  <pre><code>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(&quot;Hello world. This works now!&quot;)
  
  
  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()
  </code></pre>