Ajax post getting 403 forbidden error with Django Rest Framework

Question

There are loads of similar questions but each seems to deal with the problem under different scenarios, or the perscribed solution doesn't seem to resolve my issue. Basically, Why am I getting this 403 Forbidden Error?

POST http://127.0.0.1:8000/api/hello-viewset/ 403 (Forbidden)

The url is a Django Rest Framework (DRF) endpoint that I can access from the browser and make POSTs using the DRF gui just fine. The trouble is when I try to POST using Ajax from my javascript file. Note, that I am passing the CSRFToken (as advised here):

$.ajax({
    type: "POST",
    url: '/api/hello-viewset/',
    csrfmiddlewaretoken: window.CSRF_TOKEN, // yes, this variable is set successfully
    data: {first_name: username},
    success: function(data){
        console.log( 'success, server says '+data);
    }
});

The /api/hello-viewset/ url is just a simplified test view that looks like this:

class HelloViewSet(viewsets.ViewSet):

    serializer_class = serializers.HelloSerializer

    def post(self, request):
        serializer = serializers.HelloSerializer(data=request.data)

        if serializer.is_valid():
            first_name = serializer.data.get('first_name')
            message = 'Hello {0}'.format(first_name)
            return Response({'message': message})
        else:
            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

Thanks in advance for your help?

have you installed django-cors-headers? – Taylor Dec 06 '18 at 19:43 — Taylor, Dec 06 '18 at 19:43

score 2 · Accepted Answer · answered Dec 06 '18 at 19:46

2

csrfmiddlewaretoken: window.CSRF_TOKEN is not set correctly. It should be added to data, ie:

$.ajax({
    type: "POST",
    url: '/api/hello-viewset/',
    data: {
        first_name: username,
        csrfmiddlewaretoken: window.CSRF_TOKEN
    },
    success: function(data){
        console.log( 'success, server says '+data);
    }
});

answered Dec 06 '18 at 19:46

BottleZero

893
6
13

You're a brilliant Human being! :) That was exactly the issue. It's fixed and working now. Thank you for your help! – Michael Romrell Dec 06 '18 at 20:53

Ajax post getting 403 forbidden error with Django Rest Framework

1 Answers1