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

Posted 2023-03-03

【中文标题】在前端 PUT 请求中返回内部服务器 500 错误 | Django Vue

【英文标题】：In frontend PUT request returning Internal Server 500 error | Django Vue

【发布时间】：2021-02-08 01:37:17

【问题描述】：

我正在尝试从 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

【问题讨论】：

通常如果你得到一个 500，堆栈跟踪将发布在你的 django 服务器运行的控制台中，你能发布吗？另外，ArticleViewSet 的代码会很有帮助。

@GlennDJ，它在 localhost 127.0.0.1:8000 中运行。 ArticleViewSet 刚刚添加。

我指的是运行服务器代码的控制台窗口。但是，我刚刚注意到您将this.article 放入您的js 代码中，而您正在从article 获取id。我认为这 2 个中的一个不正确？

@GlennDJ 控制台窗口服务器是localhost:8080。它显示PUT http://127.0.0.1:8000/api/3 500 (Internal Server Error)。 Article.vue 完整代码link

【参考方案1】：

您通过 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))