Django中ajax發送post請求，報403錯誤CSRF驗證失敗解決辦法

今天學習Django框架，用ajax向后台發送post請求，直接報了403錯誤，說CSRF驗證失敗；先前用模板的話都是在里面加一個 {% csrf_token %} 就直接搞定了CSRF的問題了；很顯然，用ajax發送post請求這樣就白搭了；

 文末已經更新更簡單的方法，上面的略顯麻煩

上網上查了一下，看了幾個別人的博客，才知道官網也早有說明解決辦法，大致流程就是：

 

就是新建一個JavaScript文件，然后把網上給的代碼粘貼進去，然后在你使用ajax的頁面把它引入一下；當然，如果你在網上找到的解決代碼包含JQuery的話，那就需要在引入的JQuery之后引入了（畢竟解決代碼不唯一，網上一找一堆，基本都是對的，原生JS和帶JQuery的都有）；

文末會附上我使用的JS相關代碼，也可以去網上找！

 

如果上述沒有解決你的問題，那就說明你和我踩了同樣的一個小坑........

 

用了上面查到的方法，直接就解決了我的問題，但是隨着我對代碼修修改改、清除了相關頁面的cookie，吃個飯再運行，竟然又報403的CSRF錯誤了；百思不得其解的我又去Django官網看了一下相關部分的文檔，一堆英文看看大概找到了問題；

我發現我把html頁面里面原先加的 {% csrf_token %} 這個東西給刪掉了，加上谷歌的相關頁面cookie被我一清除，csrftoken就被咔嚓了，再刷新頁面，去html頁面里也找不到 {% csrf_token %} ，沒有了csrftoken那個cookie值，即使有相關的JS代碼也毛用沒有了；

 

打個比方：

• 你吃飯需要工具，也就是筷子，但是飯都沒有，你拿個筷子吃什么呀！！！
• 這里的筷子就是解決問題的JS代碼，而飯就是這個 {% csrf_token %} ，更確切說因該是瀏覽器中的叫 csrftoken 的 cookie；
• 兩者都有了，才能徹底解決吃飯的問題；

 

總結下來：

• 使用ajax發送post請求時，html頁面里一定要有 {% csrf_token %}，在body里應該就沒什么大問題；
• 然后引入相關的JS解決代碼；
• 補充一下，和表單沒什么太大關系，因為我的html頁面里就沒有表單，直接通過點擊按鈕發送的ajax請求；

　　

 

 

需要引入的相關JS代碼

 

 

$(document).ajaxSend(function(event, xhr, settings) {
    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 = jQuery.trim(cookies[i]);
                // 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;
    }
    function sameOrigin(url) {
        // url could be relative or scheme relative or absolute
        var host = document.location.host; // host + port
        var protocol = document.location.protocol;
        var sr_origin = '//' + host;
        var origin = protocol + sr_origin;
        // Allow absolute or scheme relative URLs to same origin
        return (url == origin || url.slice(0, origin.length + 1) == origin + '/') ||
            (url == sr_origin || url.slice(0, sr_origin.length + 1) == sr_origin + '/') ||
            // or any other URL that isn't scheme relative or absolute i.e relative.
            !(/^(\/\/|http:|https:).*/.test(url));
    }
    function safeMethod(method) {
        return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    }
 
    if (!safeMethod(settings.type) && sameOrigin(settings.url)) {
        xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
    }
});

 簡單方法

• 首先在你需要發起ajax post請求的頁面的里面隨便一個地方加上 {% crsr_token %}
• 然后瀏覽器里查看源碼，會有這么一個隱藏標簽：<input type="hidden" name="csrfmiddlewaretoken" value="jlYb5LCP21TxGapw7OuO0xbHmRnyFzlgDapiDl1M1Vp6dOjPM4BlHOgOVeuPYQ27">
• 在發起ajax post 請求時，組織json參數時，以下面這種方式使其成為參數，前兩個參數是我自定義的請自行忽略，其中鍵值對中的鍵名為input標簽的name名，值就為其value值

  csrf = $('input[name="csrfmiddlewaretoken"]').val();

  params = {'sku_id': sku_id, 'count': count, 'csrfmiddlewaretoken': csrf};

• 這樣就可以把csrf中的參數傳遞給后端，就不會有403錯誤了，相比前面用了好大一段JS代碼要簡潔的多