Cannot do axios PUT request in Django REST+React framework - Error 403

Question

I can do GET requests via the following:

axios.get('/by/f')
        .then(function (data) {
            this.setState({list: data.data});
        }.bind(this))
        .catch(function (error) {
            console.log(error);
        });

However, when I try a PUT request to update my django database, I get a 403 error:

axios({
        method: 'put',
        url: '/by/f',
        data: {
            item: item,
            frequency: frequency
        }
    }).then(function (response) {
        console.log(response);
    });

My view:

class FrequencyList(APIView):
def get(self, request, format=None):
    frequency = Frequency.objects.all()
    serializer = FrequencySerializer(frequency, many=True)
    return Response(serializer.data)

def put(self, request, pk, format=None):
    frequency = self.get_object(pk)
    serializer = FrequencySerializer(frequency, data=request.data)
    if serializer.is_valid():
        serializer.save()
        return Response(serializer.data)
    return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

my url pattern:

urlpatterns = [
    path('f', views.FrequencyList.as_view()),
]

my headers:

headers: {
  'Access-Control-Allow-Origin': '*'
},

Answer 1

Your FrequencyList view is fine for getting all frequency list and adding new frequencies. In other words get and post request are fine for FrequencyList view. But you cann't use the same view for detail api(update/delete/getDeatails). For these kid of operations you need the id of the frequency. So for update(put function) create new api/view.

url.py

urlpatterns = [
    path('f', views.FrequencyList.as_view()),
    path('f/(?P<pk>[0-9]+)$', views.FrequencyDetail.as_view()),

views.py

class FrequencyList(APIView):
    def get(self, request, format=None):
        frequency = Frequency.objects.all()
        serializer = FrequencySerializer(frequency, many=True)
        return Response(serializer.data)

class FrequencyDetail(APIView)
    def put(self, request, pk, format=None):
        frequency = Frequency.objects.get(id=pk)
        serializer = FrequencySerializer(frequency, data=request.data)
        if serializer.is_valid():
            serializer.save()
            return Response(serializer.data)
        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

and your script should be

axios({
        method: 'put',
        url: '/by/f/' + frequency, # hope frequency is the id of the object that you want to update
        data: {
            item: item,
        }
    }).then(function (response) {
        console.log(response);
    });

And no change in get

axios.get('/by/f')
        .then(function (data) {
            this.setState({list: data.data});
        }.bind(this))
        .catch(function (error) {
            console.log(error);
        });

UPDATE

frequency = Frequency.objects.get(id=pk) can be replace by the following code if you want to handle object not found error

queryset = Frequency.objects.all()
frequency = get_object_or_404(queryset, pk=pk) # from django.shortcuts import get_object_or_404