Django - AJAX POST 到 API 不起作用但没有错误

Question

我正在尝试将数据发布到我的 Django Rest Framework API，我有一个有效的 GET 请求。 POST 请求不起作用，并触发 AJAX 调用的错误函数。我似乎不明白为什么它不起作用，也许我的 CSRF 或 CORS 标头不正确？

ma​​in.js

$(function () {

  var $items = $('#items');
  var $description = $('#description');
  var $price = $('#price');

   $.ajax({
     type: 'GET',
     url: '/api',
     success: function(items) {
       console.log(items)
       $.each(items,function(i, item){
         $items.append('<li> '+ item.pk +', '+ item.Description +', '+ item.Price +'</li>');
       });
     },
     error: function() {
       alert('Error Loading Items');
     }
   });

   $('#add-item').on('click', function() {

     var order = {
       description: $description.val(),
       price: $price.val(),
     };

     $.ajax({
       type: 'POST',
       csrfmiddlewaretoken: "{{ csrf_token }}",
       url: '127.0.0.1:8000/api/',

       data: order,

       success: function(newItem) {
         $items.append('<li> '+ newItem.Description +', '+ newItem.Price +'</li>');
       },
       error: function() {
         console.log(order)
       }
     });

   });


});

models.py

class Item(models.Model):
    Description = models.CharField(max_length=20)
    Price = models.DecimalField(max_digits=5, decimal_places=2)

    def __str__(self):
        return self.Description

序列化器 Views.py

class ItemListAPIView(generics.ListCreateAPIView):
    lookup_field = 'pk'
    queryset = Item.objects.all()
    serializer_class = ItemSerializer
    permission_classes = (AllowAny,)

Answer 1

发布请求需要 X-CSRF-TOKEN 标头设置正确的令牌 - 这就是为什么 get 请求通过（我假设），但 post 不是。

您不能在 javascript 文件中使用 django 模板语言 ({{ csrf_token }})，因为它不会呈现为实际令牌 - 它只会传递字符串文字 '{{ csrf_token }}'。

你可以像这样在django docs的帮助下获取实际令牌，假设authentication is set by default：

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 = cookies[i].trim();
            // 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;
}

$.ajax({
    type: 'POST',
    headers: {
        'X-CSRF-TOKEN': getCookie('csrftoken'),
        'Content-Type': 'application/json'
    },
    url: '127.0.0.1:8000/api/',

    data: order,

    success: function (newItem) {
        $items.append('<li> ' + newItem.Description + ', ' + newItem.Price + '</li>');
    },
    error: function () {
        console.log(order)
    }
});