在前端 PUT 请求返回内部服务器 500 错误 | Django Vue

Question

我正在尝试从 DRF API 后端在 Vue 视图中执行 PUT 请求。尽管 POST 和 GET 请求在 Vue（前端）中正常工作，但对于 PUT 请求它返回 INTERNAL SERVER ERROR 500

这是我所做的。

settings.py

INSTALLED_APPS = [
    ...,
    'rest_framework',
    'corsheaders',
    'articles'
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    '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',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

REST_FRAMEWORK = {
    'DEFAULT_PERMISSION_CLASSES': [
        'rest_framework.permissions.AllowAny',
    ]
}

CORS_ALLOWED_ORIGINS = [
    "http://localhost:8080"
]

views.py

class ArticleViewSet(viewsets.ModelViewSet):
    queryset = Article.objects.all()
    serializer_class = ArticleSerializer

view.vue

updateArticle(article) {
            axios
                .put('http://127.0.0.1:8000/api/' + article.id,
                    this.article
                )
                .then(response => {
                    this.fetchArticle();
                    this.editArticle = null;
                    return response;
                })
                .catch(error => console.log(error))
        }

urls.py

from .views import ArticleViewSet
from rest_framework.routers import DefaultRouter

router = DefaultRouter()
router.register(r'', ArticleViewSet, basename='articles')
urlpatterns = router.urls

Answer 1

您通过 PUT 调用了这个 URL，但是 URL 没有以斜杠结尾，Django 在维护 PUT 数据时无法重定向到斜杠 URL。

只需在 URL

末尾添加 '/'

在你的view.vue

updateArticle(article) {
            axios
                .put('http://127.0.0.1:8000/api/' + article.id + '/',
                    this.article
                )
                .then(response => {
                    this.fetchArticle();
                    this.editArticle = null;
                    return response;
                })
                .catch(error => console.log(error))
        }

在前端 PUT 请求返回内部服务器 500 错误 | Django Vue

In frontend PUT request returning Internal Server 500 error | Django Vue

django

django-rest-framework

vue.js

django-cors-headers