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>