Django Запрещено (токен CSRF отсутствует или неверен.) В запросе Ajax - PullRequest
Новая
       7

Django Запрещено (токен CSRF отсутствует или неверен.) В запросе Ajax

0 голосов
/ 03 апреля 2020

Я пытаюсь отправить форму, используя ajax запрос в Django. Однако при перемещении сценария появляется следующая ошибка:

Запрещено (токен CSRF отсутствует или неверен.): / Home / post / like / [03 / Apr / 2020 00:49:55] "POST / home / post / like / HTTP / 1.1 "403 2513

мой js код: 

$(document).ready(function (e) {
    $(document).on("click", "#likeBtn", function (e) {
        e.preventDefault();
        var pk = $(this).attr("value");
        $.ajax({
            type: "POST",
            dataType: 'json',
            url: $(this).attr("data-url"),
            data: {'id':pk, 'csrfmiddlewaretoken': '{{ csrf_token }}'},        
            success: function (response){
                $("#like-section").html(response['form'])
            },
            error: function(rs, e){
                console.log(rs.responeText);
            },
        });
    });
})

мой взгляд: 

@login_required
def post_like(request):
    post = get_object_or_404(Post, id=request.POST.get('id'))
    is_liked = False
    user = request.user
    if post.likes.filter(id=user.id).exists():
        post.likes.remove(user)
        is_liked = False
    else:
        post.likes.add(user)
        is_liked = True
    context = {
        'post' : post,
        'is_liked': is_liked,
    }
    if request.is_ajax():
       html = render_to_string('home/posts/likes.html', context, request=request)
       return JsonResponse({'form':html})

Но когда я добавляю следующий скрипт для файла html. Он работает: 

$(document).ready(function (e) {
    $(document).on("click", "#likeBtn", function (e) {
        e.preventDefault();
        var pk = $(this).attr("value");
        $.ajax({
            type: "POST",
            dataType: 'json',
            url: "{% url 'home:post-like' }",
            data: {'id':pk, 'csrfmiddlewaretoken': '{{ csrf_token }}'},        
            success: function (response){
                $("#like-section").html(response['form'])
            },
            error: function(rs, e){
                console.log(rs.responeText);
            },
        });
    });
})

Мне удалось устранить ошибку, используя приведенный ниже формат, однако я не знаю, является ли это безопасным способом сделать это.

моя новая форма: 

<form action="{% url 'home:post-like' %}" method="POST">
    {% csrf_token %}
    {% if is_liked %}
        <button type="submit" id="likeBtn" data-url="{% url 'home:post-like' %}" data-token="{{ csrf_token }}" name="post_id" value="{{ post.id }}" class="btn btn-sm">
            <span class="text-primary">
                <i class="fas fa-thumbs-down"></i> {{ post.likes.count }}
            </span>
        </button>
    {% else %}
        <button type="submit" id="likeBtn" data-url="{% url 'home:post-like' %}" data-token="{{ csrf_token }}" name="post_id" value="{{ post.id }}" class="btn btn-sm">
            <span class="text-primary">
                <i class="fas fa-thumbs-up"></i> {{ post.likes.count }}
            </span>
        </button>
    {% endif %}
</form>

мой новый js код: 

$(document).ready(function (e) {
    $(document).on("click", "#likeBtn", function (e) {
        e.preventDefault();
        var pk = $(this).attr("value");
        var tk = $(this).attr("data-token")
        $.ajax({
            type: "POST",
            dataType: 'json',
            url: $(this).attr("data-url"),
            data: {'id':pk, 'csrfmiddlewaretoken': tk},        
            success: function (response){
                $("#like-section").html(response['form'])
            },
            error: function(rs, e){
                console.log(rs.responeText);
            },
        });
    });

Мне интересно, это безопасный способ сделать это?

...