【Django Rest + React】：无法删除项目和发布问题（错误403和301）

Question

我正在构建一个非常简单的 React + Django 网站。一切都很顺利，直到今天我对后端和前端进行了一些更改以添加第三个应用程序来显示带有描述的虚拟图片。

直到那时，我一直在使用 axios 轻松地获取、post 和删除请求。我刚刚写了 axios.post("api/", item) 它会 post 该项目，或者 axios.delete(api/{props.id}) 并且该项目将被删除.

现在，none 这些工作。起初我开始收到 403 错误。在进行一些故障排除时，我尝试添加完整的 url 以查看它是否有效。 Post 成功了。 axios.post("localhost:8000/api/", item) 现在 posts 项目。问题是，当我尝试删除 - axios.delete(localhost:8000/api/{props.id}) - 时，出现 301 错误。

除了痛骂自己之前没有备份，我还能怎么办？这些是后端和前端代码。

前端：

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
      setTaskList(filteredData);
    });
  };

  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) => {
    console.log(id)
    await axios
      .post(`/todo/${id}`, item)
      .then(() => refreshList());

    console.log('ToDo')

  }

  const onDeleteHandler = async (id) => {

    await axios
      .delete(`/todo/${id}`)
      .then(() => {
        refreshList()
      })
  };

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

export default ToDo;

后端：

settings.py

...
"""
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/
"""

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'

(...)

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 = [
    "DELETE",
    "GET",
    "OPTIONS",
    "PATCH",
    "POST",
    "PUT",
]

# CORS_ALLOW_ALL_ORIGINS = True

CSRF_TRUSTED_ORIGINS = [
        'http://localhost:3000',
    ]

urls.py

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)

models.py

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

serializers.py

  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')

views.py

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()

Answer 1

我刚刚删除了我所有的迁移和数据库并重新处理了整个 makemigrations-migrate 处理 Django 突然它就可以工作了。

可能跟之前迁移的方式有关系？我永远不会知道。

【Django Rest + React】：无法删除项目和发布问题（错误403和301）

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

reactjs

django

django-rest-framework