在前端PUT请求中返回Internal Server 500错误Django Vue

时间:2020-10-25 16:43:47

标签: django vue.js django-rest-framework django-cors-headers

我正在尝试从DRF API后端在Vue视图中执行PUT请求。尽管POSTGET请求在Vue(frontend)中正常工作,但是对于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

1 个答案:

答案 0 :(得分:0)

您通过PUT调用了此URL,但该URL并非以斜杠结尾,并且Django在保留PUT数据时无法重定向到斜杠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))
        }