Почему я получаю ошибку 403 с токеном CSRF - Django - Vue Ressource - PullRequest
Новая
       38

Почему я получаю ошибку 403 с токеном CSRF - Django - Vue Ressource

0 голосов
/ 25 октября 2018

Я новичок в 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

Файл My 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)

Мой URL: 

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

Я могу получить токен CSRF в консоли, но все равно получаю ошибку 403.

Уже пару дней яищу ошибку, но я не понимаю, где она.

Заранее благодарен за помощь.

Singertwist

Редактировать 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)

1 Ответ

0 голосов
/ 25 октября 2018

CSRF-токен не является заголовком, он должен быть отправлен с почтовыми данными. 

var data = {                                // not familiar with vue
        'csrfmiddlewaretoken': csrftoken,   // i hope this is how you set data in vue
        'next': 'foobar'
    }
this.$http.post('http://127.0.0.1:8000/commander/add/' + id +'/', data)
...