詳細：「CSRFが失敗しました：CSRFトークンが見つからないか正しくありません。

Question

review_detail.htmlのscriptタグの中でwindow.CSRF_TOKEN = "{{csrf_token}}"を使用して、レビュー投稿用の反応ページがレンダリングされました。しかし、私はエラーが発生しています。私のonSubmit関数では、私はcsrfトークンが渡されているかどうかを確認するためにconsoledしています。

レビューを投稿するための私のaxiosコードは

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.pですY

restaurant_detail.html

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

どのように私はこの問題を解決することができますか？

Answer 1

単純なエラーがありました。タイプミスがあります。あなたがコードを正しく持っている場合は 'X-CSRFToken'

'はX-CSRFToken'

には、それはあなたを投稿する必要があり置き換えますかデータ。

Answer 2

私はaxiosに慣れていないんだけど、私は同様の問題は、jQueryを使ってブローコードを使用して解く：

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

Answer 3

あなたはクッキーの値を持つAJAX呼び出しのヘッダを設定する必要があります。

$.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')); 
    } 
} 
});