axios django csrf

Step 1: Install Axios

npm install axios

Step 2: Import Axios in your JavaScript file

import axios from 'axios';

Step 3: Include CSRF Token in Axios Requests

const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;

const axiosInstance = axios.create({
  headers: {
    'X-CSRFToken': csrfToken,
  },
});

Step 4: Make a POST Request with Axios

const data = {
  key1: 'value1',
  key2: 'value2',
};

axiosInstance.post('/your-api-endpoint/', data)
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

Step 5: Update Django View to Accept CSRF Token

from django.views.decorators.csrf import csrf_exempt
from django.http import JsonResponse

@csrf_exempt
def your_api_view(request):
    if request.method == 'POST':
        # Your logic here
        return JsonResponse({'message': 'Data received successfully'})
    else:
        return JsonResponse({'error': 'Invalid request method'})

Step 6: Update URLs to Map to the View

from django.urls import path
from .views import your_api_view

urlpatterns = [
    # Other patterns
    path('your-api-endpoint/', your_api_view, name='your-api-view'),
]

Step 7: Ensure CSRF Token is Included in Django Template

{% csrf_token %}

Step 8: Set Up Axios in Template

<script>
  const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;

  const axiosInstance = axios.create({
    headers: {
      'X-CSRFToken': csrfToken,
    },
  });

  // Your other JavaScript code using axiosInstance
</script>