1

I've read the duplicates and nothing seems to be working. I can do the put request directly from the form in the url but I can't seem to get the axios request working.

I tried:

CSRF with Django, React+Redux using Axios https://gist.github.com/paltman/490049a64fa4115a2cea

my view.py:

class FrequencyList(generics.ListCreateAPIView):
    queryset = Frequency.objects.all()
    serializer_class = FrequencySerializer


class FrequencyDetail(generics.RetrieveUpdateDestroyAPIView):
    queryset = Frequency.objects.all()
    serializer_class = FrequencySerializer

My axios request:

axios({
        method: 'put',
        url: '/f/'+id,
        data: {
            item: item,
        },
    }).then(function (response) {
        this.setState({needReceipt: true});
    })
    .catch(function (error) {
        console.log(error);
    });

In my settings.py:

REST_FRAMEWORK = {
    'DEFAULT_PERMISSION_CLASSES': (
        'rest_framework.permissions.AllowAny',
    ),
}

in my webpack.config.dev.js:

const axios = require('axios');

axios.defaults.xsrfHeaderName = "X-CSRFToken";
axios.defaults.xsrfCookieName = "csrftoken";
somethingstrang
  • 1,079
  • 2
  • 14
  • 29

1 Answers1

1

try this

axios.put('/f/'+id, { item: item })
    .then(function(response){
        this.setState({needReceipt: true});
});

Reference

Aneesh R S
  • 3,807
  • 4
  • 23
  • 35
  • 403 (Forbidden) – somethingstrang Feb 27 '18 at 05:17
  • Sorry its axios.put not axios.post. Updated my answer.Check the django console for the url, make sure it hits the same url like `/f/123` and method is put and the response. If still you are facing 403 then add `permission_classes = (AllowAny,)` to the class(FrequencyDetail) – Aneesh R S Feb 27 '18 at 05:22
  • I've tried all those suggestions above and I still get the error. The error is as following: PUT http://localhost:8000/f/89 403 (Forbidden) I can physically go to the url and enter the put manually, so I know the id is correct. – somethingstrang Feb 27 '18 at 05:33
  • so the put request working fine and axios.put request fails, is that the problem. how did you made successfull put request, is through postman. If so check the headers.If no headers are present, then the remove the X-CSRFToken token and other headers. – Aneesh R S Feb 27 '18 at 05:39
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/165867/discussion-between-aneesh-rs-and-somethingstrang). – Aneesh R S Feb 27 '18 at 05:40