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

Question

I am trying to perform a PUT request in Vue view from DRF API backend. Though POST and GET requests are working properly in Vue(frontend) but for PUT request it's returning INTERNAL SERVER ERROR 500

Here is what I have done.

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

You called this URL via PUT, but the URL doesn't end in a slash and Django can't redirect to the slash URL while maintaining PUT data.

Just add '/' at the end of the URL

In your 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))
        }