Django: Getting 403(csrf token validation error) If I make POST/PUT request one after other

Question

I have page where I render datatables to display the data with buttons like edit and delete per row,I have also one global button to create new entry. The create button opens a modal form which is standard bootstrap model. I am using this same form to create & update records.So if refresh my page & create one new entry it works but without refresh when click on the edit button then submit the modal form it gives me this error,

CSRF verification failed. Request aborted.

All this operations are performed using the AJAX request so I am not reloading the page after each request.How can I resolve this? Here is my server side code you want to take a look,

class CategoryView(AdminLoginRequiredMixin,View):
    
    def post(self, request):
        form = DownloadableCategoryForm(request.POST)

        if not form.is_valid():
            return JsonResponseBuilder.validation_error(form.errors)

        form.save()
       
        return JsonResponseBuilder.success('Category created succesfully...')

    # to update category
    def put(self, request):
        try:
            category = DownloadableCategory.objects.get(pk=request.POST.get('id'))
        except DownloadableCategory.DoesNotExist:
            return JsonResponseBuilder.error('Category not found!', HTTPStatus.NOT_FOUND.value)

        form = DownloadableCategoryForm(request.POST,instance=category)

        if not form.is_valid():
            return JsonResponseBuilder.validation_error(form.errors)

        form.save()
        
        return JsonResponseBuilder.success('Category updated succesfully...')

Here is my JS code which I am using to create/update records

$.ajax({
                    url: "{% url 'admin:create_downloadable_category' %}",
                    method: id.length == 0 ? "POST" : "PUT",
                    data: new FormData(form[0]),
                    processData: false,
                    contentType: false,
                    beforeSend: function () {
                        $('.pre-loader-screen').fadeIn(200);
                    },
                    
                    error: function (err) {
                        console.log(err);
                        error = JSON.parse(err.responseText)

                        swal(
                            {
                                title: "Error!",
                                text: error['message'] || 'Internal Server Error!',
                                type: "error",
                                showCancelButton: true,
                                closeOnConfirm: true,
                            })

                    },
                    success: function (response) {
                        categoryModal.modal('hide')
                        $('.pre-loader-screen').fadeOut(200);
                        reloadDatatable()
                        toastr.success(response.message);
                    }
                });

Edit: I came to know that update method is not working even if I refresh the page & try to update the records. It just giving me 403 error.

I believe that AdminLoginRequiredMixin requires to be logged-in to access this endpoint. However, AJAX call does not contain authentication. How do you authenticate AJAX call? — Egor Wexler, Jan 16 '21 at 07:39
Can you show the code for FormData and where you are getting the variable form[0] from. — Abdul Aziz Barkat, Jan 16 '21 at 07:45
Does this answer your question? [Django CSRF check failing with an Ajax POST request](https://stackoverflow.com/questions/5100539/django-csrf-check-failing-with-an-ajax-post-request) — Iain Shelvington, Jan 16 '21 at 07:46
Also `pk=request.POST.get('id')` I don't think this would work in a PUT request. — Abdul Aziz Barkat, Jan 16 '21 at 07:48
@RopAliMunshi because it contains the POST parameters only. If you want to get parameters for a PUT request [this](https://stackoverflow.com/questions/4994789/django-where-are-the-params-stored-on-a-put-delete-request) might help you, — Abdul Aziz Barkat, Jan 16 '21 at 08:20
Thank you all for your response. I have created a separate view for the update & it fixes this issue. — Ropali Munshi, Jan 16 '21 at 09:04

score 1 · Answer 1 · answered Jan 16 '21 at 07:28

1

You should render the modal content from the server. When user clicks on the modal to create/update the object at that time you have to fire AJAX call for the updated modal content and update the modal content.

You should create a AJAX view which gives you a modal content.

answered Jan 16 '21 at 07:28

Pritesh Suvagiya

156
4

I dont think I have to render all the modal content as I am rendering the csrf token. – Ropali Munshi Jan 16 '21 at 07:32
As per your requirements, you can either get only csrf token from the server through AJAX and update in the modal. – Pritesh Suvagiya Jan 16 '21 at 07:33
@PriteshSuvagiya CSRF token doesn't change within a session unless some settings have been changed – Abdul Aziz Barkat Jan 16 '21 at 07:36
https://docs.djangoproject.com/en/3.1/ref/csrf/#setting-the-token-on-the-ajax-request, You have to send the CSRF TOKEN in headers while using the AJAX request. – Pritesh Suvagiya Jan 16 '21 at 07:45

Django: Getting 403(csrf token validation error) If I make POST/PUT request one after other

1 Answers1