CSRF verification does not function properly when the script is placed in the static directory

Question

CSRF verification does not function properly when the script is placed in the static directory

Code Snippet:

   $('.delete').click(function() {  
          if (confirm("Are you sure you want to delete?")) {      
          var csrf_token = $("#csrf_token").val();    
          $.ajax({ // performing an AJAX call...
            data:{
                csrfmiddlewaretoken: ('{{csrf_token}}'),
                delete:true
            },
            type:'POST',
            url: '/feed_list/', 
            cache:false,
            success: function() { 
                window.location.href = window.location;
            }
        });
        return false;
      }
    });

In this JavaScript function, I am calling a method in views.py that performs a delete function. The delete function is functioning properly, however my issue lies in having this JavaScript function on the current HTML page. When attempting to move this function to a static folder -> scripts -> custom.js, it results in a 403 error page with the message

CSRF verification failed. Request aborted.

, although I am passing the CSRF token in both the form and the JavaScript. I am seeking suggestions on how to resolve this dilemma.

javascript ajax django django-templates

Answer 1

Answer №1

Unfortunately, the django server is not capable of rendering js files which means your current solution will not work.

To resolve this issue, you can take the following steps:

First, add a jquery plugin by visiting: http://plugins.jquery.com/cookie/

Then, in your js file, use the code snippet below to retrieve the csrf token:

csrfmiddlewaretoken: $.cookie('csrftoken'),

Answer 2

Unfortunately, the django server is not capable of rendering js files which means your current solution will not work.

To resolve this issue, you can take the following steps:

First, add a jquery plugin by visiting: http://plugins.jquery.com/cookie/

Then, in your js file, use the code snippet below to retrieve the csrf token:

csrfmiddlewaretoken: $.cookie('csrftoken'),

Answer 3

Answer №2

Ensure that you have set the csrf_token and include it in your ajax request:

data:{
            csrfmiddlewaretoken: csrf_token,
            delete:true
        }

If you are unsure about the input format, I usually define token like this:

token = $('input[name="csrfmiddlewaretoken"]').val()

In the base template, make sure to include {% csrf_token %} which generates the following HTML code:

<input type="hidden" name="csrfmiddlewaretoken" value="your_token">

Answer 4

Ensure that you have set the csrf_token and include it in your ajax request:

data:{
            csrfmiddlewaretoken: csrf_token,
            delete:true
        }

If you are unsure about the input format, I usually define token like this:

token = $('input[name="csrfmiddlewaretoken"]').val()

In the base template, make sure to include {% csrf_token %} which generates the following HTML code:

<input type="hidden" name="csrfmiddlewaretoken" value="your_token">

CSRF verification does not function properly when the script is placed in the static directory

Answer №1

Answer №2

Similar questions

Creating user accounts in Django

AJAX request encounters error when trying to send file, receiving a 'blob' error message

Transfer the values of two divs into a unified output div

Troubleshooting TextField malfunctioning after button click within Dialog on Material UI

Generating Bootstrap carousel items dynamically using JavaScript

Transform a fabricjs canvas into a base64 encoded image

Enhance your viewing experience with the Zoom feature that activates when

Encountering a NoSuchElementException when transitioning from frame[0] to window[1] in Firefox GeckoDriver using Selenium with Python

Managing styles and scripts in Asp.Net MVC: A guide to efficient organization

Is there a way to add to a list using the example provided and display the result as well

Is there a way to insert a row into a datatable without needing to perform an Ajax reload or using the

I continue to encounter an error every time I attempt to place an HTML nested div on a separate line

Attempting to make a slightly bigger than usual AXIOS.post request to a .NET Web API

Managing numerous asynchronous calls using jQuery

Issue with npm version: 'find_dp0' is not a valid command

Exploring Django REST framework's functionality for interacting with nested data through GET and POST requests

Retrieving row and column values from an 81-element indexed array

what causes request.GET.get() to result in "None" and why is the value of the html element not displayed in the URL

Can someone please help me understand why my CSS transform scale isn't functioning properly?

Limit the vertical movement in Vue drag and drop operations