detail: "CSRF Failed: CSRF token missing or incorrect."

Question

I have used window.CSRF_TOKEN = "{{ csrf_token }}" inside script tag in restaurant_detail.html where my react page for posting review is rendered. I am getting an error, though. In my onSubmit function i have consoled to check if csrf token is passed or not and yes it is.

my axios code for posting review is

onSubmit(props){
        console.log('csrf',CSRF_TOKEN);
        axios({
            method:'POST',
            url:'/api/review/create/',
            headers:{
                'X-CSRF-Token':CSRF_TOKEN,
                //'Access-Control-Allow-Origin':'*',
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            data:{
                review:props.review
            }
        })
        .then(response => {
            console.log('success');
        })
        .catch(error => {
            throw("Error: ",error);
        });
    } 

api/Views.py

class ReviewCreateAPIView(CreateAPIView):
    queryset = Review.objects.all()
    # permisssion_classes = [IsAuthenticated]

    def get_serializer_class(self):
        model_type = self.request.GET.get('type')
        slug = self.request.GET.get('slug')
        parent_id = self.request.GET.get('parent_id')
        return create_review_serializer(model_type=model_type, slug=slug, parent_id=parent_id, reviewer=self.request.user)

serializers.py

def create_review_serializer(model_type='restaurant',slug=None, parent_id=None, reviewer=None):
    class ReviewCreateSerializer(ModelSerializer):
        class Meta:
            model = Review 
            fields = ('id','review','created',)

        def __init__(self, *args, **kwargs):
            self.model_type = model_type
            self.slug = slug 
            self.parent_obj = None 
            if parent_id:
                parent_qs = Review.objects.filter(id=parent_id)
                if parent_qs.exists() and parent_qs.count() == 1:
                    self.parent_obj = parent_qs.first()
            return super(ReviewCreateSerializer, self).__init__(*args, **kwargs)

        def validate(self, data):
            model_type = self.model_type
            model_qs = ContentType.objects.filter(model=model_type)
            if not model_qs.exists() or model_qs.count() != 1:
                raise ValidationError('This is not a valid content type')
            SomeModel = model_qs.first().model_class()
            obj_qs = SomeModel.objects.filter(slug=self.slug) # Restaurant.objects.filter(slug=self.slug)
            if not obj_qs.exists() or obj_qs.count() != 1:
                raise ValidationError('This is not a slug for this content type')
            return data 

        def create(self, validated_data):
            review = validated_data.get('review')
            print('review',review)
            if reviewer:
                main_reviewer = reviewer
            else:
                main_reviewer = User.objects.all().first()
            model_type = self.model_type
            slug = self.slug 
            parent_obj = self.parent_obj
            review = Review.objects.create_for_model_type(model_type, slug, review, main_reviewer, parent_obj=parent_obj)
            return review

    return ReviewCreateSerializer

urls.py

url(r'^create/$', ReviewCreateAPIView.as_view(), name="reviewcreateapiview"),

restaurant_detail.html

<div id="app"></div>
<script type="text/javascript"> window.CSRF_TOKEN = "{{ csrf_token }}"; </script>

How can i resolve this?

Answer 1

You have done a simple error. There is a typo. Do replace

'X-CSRF-Token'

to

'X-CSRFToken'

if you have code correctly, then it should post your data.

Answer 2

you have to set the header in ajax call with cookie values.

$.ajaxSetup({ 
 beforeSend: function(xhr, settings) {
     function getCookie(name) {
         var cookieValue = null;
         if (document.cookie && document.cookie != '') {
             var cookies = document.cookie.split(';');
             for (var i = 0; i < cookies.length; i++) {
                 var cookie = jQuery.trim(cookies[i]);
                 // Does this cookie string begin with the name we want?
                 if (cookie.substring(0, name.length + 1) == (name + '=')) {
                     cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                     break;
                 }
             }
         }
         return cookieValue;
     }
     if (!(/^http:.*/.test(settings.url) || /^https:.*/.test(settings.url))) {
         // Only send the token to relative URLs i.e. locally.
         xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
     }
 } 
});

Answer 3

I'm not familiar with axios,but I solved a similar problem use the blow code with JQuery:

  $.ajaxSetup({
    data : {
        csrfmiddlewaretoken : '{{ csrf_token }}'
    },
});