Question

我是Django和Vue.js的新手。我有一个应用程序，正在尝试发布数据，但出现403错误（即使带有CSR令牌）。

当前，我编写了以下代码：

基本模板：我得到了CSRF令牌

<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<script type="text/javascript">
    window.csrftoken = Cookies.get('csrftoken');
</script>

显示表单的我的模板：

<form @click.prevent="addtoCart({{article.id}})" method="post" action="{% url 'cart_add' article.id %}">
    {% csrf_token %}
    {{ cart_product_form }}
    <input type="image" src="{% static 'img/icones/shopping-cart.png' %}" alt="shopping-cart" />
    <input type="hidden" name="next" value="{{ request.path }}">
</form

我的Vue文件：

methods: {
    addtoCart: function(id) {
        csrftoken = window.csrftoken;
        this.$http.post('http://127.0.0.1:8000/commander/add/' + id +'/', {headers: {'csrfmiddlewaretoken': csrftoken}});
        console.log(csrftoken);
    }
}

我的观点：

def cart_add(request, product_id):
    product = get_object_or_404(Variations_Articles, id=product_id)
    cart = Cart(request)
    form = CartAddProductForm(request.POST)
    if form.is_valid():
        cd = form.cleaned_data
        next = cd['next']
        var = cart.add(product=product, quantity=cd['quantity'])
    return HttpResponseRedirect(next)

我的网址：

path('add/<int:product_id>/', views.cart_add, name='cart_add')

我可以在控制台中获取CSRF令牌，但仍然出现403错误。

过了几天，我一直在寻找错误，但我不知道它在哪里。

预先感谢您的帮助。

歌手扭曲

编辑1：

addtoCart: function(id) {

    csrftoken = document.querySelector('input[name="csrfmiddlewaretoken"]').getAttribute("value");
    var data = {                              
    'csrfmiddlewaretoken': csrftoken,
    'next': window.location.href,
    }
    this.$http.post('http://127.0.0.1:8000/commander/add/' + id +'/', data);
    console.log(data);
}

解决方案：我使用以下代码在标头中传递CSRFToken。

Vue.http.interceptors.push((request, next) => {
  var csrftoken = document.querySelector('input[name="csrfmiddlewaretoken"]').getAttribute("value");
  request.headers.set('X-CSRFTOKEN', csrftoken)
  next()
})

还有view.py：

if request.is_ajax():
        data = json.loads(request.body)
        next = data['next']
        comment = data['comment']
        final_composed_cart.add_to_final_composed_cart(categorie_composed_cart=categorie_composed_cart, quantity=1, comment=comment)
        return HttpResponseRedirect(next)

Answer 1

CSRF令牌不是标头，应该与发布数据一起提交。

dynamic_cast<Two*>(this)

为什么CSRF令牌出现403错误-Django-Vue Ressource

1 个答案: