Error: CSRF token not found or invalid. What is the procedure for transmitting a CSRF token from the frontend to the backend?

Question

Error: CSRF token not found or invalid. What is the procedure for transmitting a CSRF token from the frontend to the backend?

In my Django project, I have a task that involves sending a date string from the frontend to the backend. On the frontend, I am utilizing JavaScript's fetch method.

async function getCustomerInDeliveryDate(deliveryDate : String) {
        const response = await fetch('getCustomerInTripDate', {
            method : 'POST',
            headers : {
                'Content-Type' : 'application/json',
            },
            body: JSON.stringify({
                deliveryDate :  deliveryDate
            }),
        });
        return response
    }

In the Django backend, I have a basic method set up that currently returns a string to the frontend.

class GetCustomerInTripDate(LoginRequiredMixin, View):
        def post(self, request, *args, **kwargs):
            print('Backend received call from front end!!!!!!!!!!!!!')
            return JsonResponse({'data': ['hello', 'world']}, status = 200)

Upon attempting to send data to the backend, I encounter the following error:

Forbidden (CSRF token missing or incorrect.): /staff/getCustomerInTripDate

I'm unsure how to include the CSRF token. The information I've found suggests setting credentials as "same-origin", which I've tried but still receive the same error message.

javascript django django-views fetch-api

Answer 1

Answer №1

To ensure security, remember to include {% csrf_token %} in your template file.

If you are working with a standard HTML form, place the token inside the form tags.

<form action="/your-name/" method="post">
    {% csrf_token %}
    {{ form }}
    <input type="submit" value="Submit">
</form>

For Ajax requests, the placement of the token does not matter as long as it is included in the POST data.

submitData = {
  
  // other data

  'csrfmiddlewaretoken': $("[name=csrfmiddlewaretoken]").val()
};

$.ajax({
  method: 'post',
  url: 'some_url',
  data: submitData,
  success: function(data){
    // do things
  },
  error: function(event,xhr,settings,errorText){
    // handle errors
  }
});

Answer 2

To ensure security, remember to include {% csrf_token %} in your template file.

If you are working with a standard HTML form, place the token inside the form tags.

<form action="/your-name/" method="post">
    {% csrf_token %}
    {{ form }}
    <input type="submit" value="Submit">
</form>

For Ajax requests, the placement of the token does not matter as long as it is included in the POST data.

submitData = {
  
  // other data

  'csrfmiddlewaretoken': $("[name=csrfmiddlewaretoken]").val()
};

$.ajax({
  method: 'post',
  url: 'some_url',
  data: submitData,
  success: function(data){
    // do things
  },
  error: function(event,xhr,settings,errorText){
    // handle errors
  }
});

Answer 3

Answer №2

It appears that the issue you are encountering is related to Cross Site Request Forgery (CSRF)

You can find a more in-depth explanation here https://docs.djangoproject.com/en/4.1/ref/csrf/

To address this problem, consider incorporating {% csrf_token %} protection within your Django templates.

<form action="" method="post">
    {% csrf_token %} <----- INSERT THIS LINE
......all other form elements go here
</form>

If you are not utilizing Django templates, try applying the csrf decorator to your view. Here's a suggested implementation:

from django.utils.decorators import method_decorator<----- ADD THIS
    
@method_decorator(csrf_exempt, name='dispatch')<----- INCLUDE THIS
class GetCustomerInTripDate(LoginRequiredMixin, View):
    def post(self, request, *args, **kwargs):
        print('Backend received call from front end!!!!!!!!!!!!!')
        return JsonResponse({'data': ['hello', 'world']}, status = 200)

This solution should hopefully resolve the issue. Let me know if you need further assistance. Best regards.

Answer 4

It appears that the issue you are encountering is related to Cross Site Request Forgery (CSRF)

You can find a more in-depth explanation here https://docs.djangoproject.com/en/4.1/ref/csrf/

To address this problem, consider incorporating {% csrf_token %} protection within your Django templates.

<form action="" method="post">
    {% csrf_token %} <----- INSERT THIS LINE
......all other form elements go here
</form>

If you are not utilizing Django templates, try applying the csrf decorator to your view. Here's a suggested implementation:

from django.utils.decorators import method_decorator<----- ADD THIS
    
@method_decorator(csrf_exempt, name='dispatch')<----- INCLUDE THIS
class GetCustomerInTripDate(LoginRequiredMixin, View):
    def post(self, request, *args, **kwargs):
        print('Backend received call from front end!!!!!!!!!!!!!')
        return JsonResponse({'data': ['hello', 'world']}, status = 200)

This solution should hopefully resolve the issue. Let me know if you need further assistance. Best regards.

Answer 5

Answer №3

By default, the CSRF token is stored as a cookie. To access it, use JavaScript to retrieve the cookie and then send the token.

Alternatively, you have the option of creating a restful endpoint for this purpose.

Answer 6

By default, the CSRF token is stored as a cookie. To access it, use JavaScript to retrieve the cookie and then send the token.

Alternatively, you have the option of creating a restful endpoint for this purpose.

Error: CSRF token not found or invalid. What is the procedure for transmitting a CSRF token from the frontend to the backend?

Answer №1

Answer №2

Answer №3

Similar questions

box tick does not alter appearance

Exporting a module with Node.js is a crucial aspect of building

What is the reason behind jshint issuing an alert specifically for the lastSelectedRow being

Is it possible for a conditional type in TypeScript to be based on its own value?

Why is the imported package not being recognized in the namespace declaration of my Node.js TypeScript file?

Is there a way to give a ReactJS button a pressed appearance when a key is pressed?

Is it possible to have 1 million links on a single webpage?

Information derived from a provided URL

Show only child elements of a specific type within the parent div

Creating an overlay button within various containing divs requires setting the position of the button

I possess a pair of items that require merging together while combining any overlapping key values in their properties

Steps for updating the property "project_id" within a nested JSON array to "project_name"

Unable to interpret Python/Django-generated JSON object on client side

Delete one item from a group of objects[]

Is there a way to eliminate the blue border from a Material React Modal?

Create specification for the properties of the child component

Getting the value returned by http.request in an app.get method using express.js

What is causing the malfunction in this straightforward attrTween demonstration?

How to prioritize indices when querying multiple indexes in Elasticsearch?

Tips for managing onClick events within a conditional component