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': '*'
},

Your url pattern does not have any integer. Then how will you going to receive pk. The problem is that when you call '/by/f', url will search for another view and there is no put function implemented. — Aneesh R S
– Aneesh R S, Commented Feb 26, 2018 at 6:04

Aneesh R S · Accepted Answer · 2018-02-26 08:33:36Z

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

edited Feb 26, 2018 at 8:33

answered Feb 26, 2018 at 8:03

Aneesh R S

3,8174 gold badges25 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

somethingstrang Over a year ago

Hi, everything is almost working so far. The only thing is I get a 403 Forbidden Error when axios.get gets called. I can do a proper put in the form when to go to localhost:8000/f/1 for example. But the axios.get call doesn't work. Do you know why?

Aneesh R S Over a year ago

so the put request is working and the get request fails.is that the problem. Then whats the response and request you have made

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related