Forbidden (CSRF token missing or incorrect.): /u/submit

Question

views.py

def form(request):
    if request.method == 'POST':
        form = StudentForm(request.POST)
        if form.is_valid():
            form.save()
            return HttpResponse('done')
    else:
        form = StudentForm()
    return render(request,'submit.html',{'form':form})

urls.py

urlpatterns = [
    path('submit',views.form, name = 'submit')
]

templates/html

<!DOCTYPE html>
{% load staticfiles %}
<html lang="en">
<head>
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
   </script>

    <script src="{% static 'js/ajax2.js' %}" type="text/javascript"></script>
</head>


<body>

<form class="form_ajax" method="post" data-url="/submit" >
    {% csrf_token %}
    {{ form }}
    <button id="btn" type="submit">Submit</button>
</form>
</body>

ajax2.js

$(document).ready(function(){
    $('#btn').click(function(event){
        event.preventDefault()
        var name = $('#id_name').val();
        var marks = $('#id_marks').val();
        var year = $('#id_year').val();
        csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val()

        $.ajax({
            url :'/u/submit',
            type: 'POST',
            data :{'name':name,'marks':marks,'year':year},
            success : function(data){
                console.log(data);
                alert('created:',data);
            },
        });
    });
});

It shows Forbidden (CSRF token missing or incorrect.): /u/submit . therefore i tried to do js in different method

$(document).ready(function(){
    $('#btn').click(function(event){
        event.preventDefault()
        var myForm = $('.ajax_form');
        var formData = myForm.serialize();
        var thisUrl = myForm.attr('data-url') || window.location.href;



        $.ajax({
            url :thisUrl,
            type: 'POST',
            data :formData,
            success : function(data){
                console.log(data);
                alert('created:',data);
            },
        });
    });
});

But it is sowing same 403 error, but as you can see i have given csrf_token in html form.But still its giving error.Even providing csrf middleware token in ajax its still now working.. What am i doing wrong?

Answer 1

Add csrf token header in your jquery ajax call , like this :

$(document).ready(function(){
    $('#btn').click(function(event){
        event.preventDefault()
        var myForm = $('.ajax_form');
        var formData = myForm.serialize();
        var thisUrl = myForm.attr('data-url') || window.location.href;

       let csrfcookie = function() {
            let cookieValue = null,
                name = "csrftoken";
            if (document.cookie && document.cookie !== "") {
                let cookies = document.cookie.split(";");
                for (let i = 0; i < cookies.length; i++) {
                    let cookie = cookies[i].trim();
                    if (cookie.substring(0, name.length + 1) == (name + "=")) {
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break;
                    }
                }
            }
            return cookieValue;
        };

        $.ajax({
            url :thisUrl,
            type: 'POST',
            beforeSend: function(request, settings) {
                        if (!(/^http:.*/.test(settings.url) || /^https:.*/.test(settings.url))) {
                            request.setRequestHeader("X-CSRFToken", csrfcookie());
                        }
                    },
            data :formData,
            success : function(data){
                console.log(data);
                alert('created:',data);
            },
        });
    });
});

Forbidden (CSRF token missing or incorrect.): /u/submit

Question

1 answers

solution1
0 2018-07-22 17:05:07

Forbidden (CSRF token missing or incorrect.): /u/submit

Question

1 answers

solution1 0 2018-07-22 17:05:07

solution1
0 2018-07-22 17:05:07