Django 如何讓ajax的POST方法帶上CSRF令牌

問題

你們知道，在大前端領域，有一種叫作ajax的東東，即「Asynchronous Javascript And XML」（異步 JavaScript 和 XML），它被用來在不刷新頁面的狀況下，提交和請求數據。當沒有<form>元素時，也就是若是Django服務器接收的是一個經過ajax發送過來的POST請求的話，那麼將很麻煩，何也？由於只要有<form>元素就能夠直接攜帶{% csrf_token %}令牌，可是，在沒有<form>元素狀況下，ajax沒辦法像<form>元素那樣攜帶{% csrf_token %}令牌。那怎麼辦呢？好辦！

方法一（用在js文件中）

在你的前端模版的JavaScript代碼處，添加下面的代碼：

/****************** BEGIN ******************/
// 官方提供的js文件ajax攜帶CSRF令牌的方法(使用jQuery庫)，參考官網https://docs.djangoproject.com/zh-hans/2.0/ref/csrf/

//***** 第一步：獲取CSRF令牌 *****//
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;
}
var csrftoken = getCookie('csrftoken');

//***** 第二步：在ajax請求上設置CSRF令牌 *****// function csrfSafeMethod(method) {
    // 這些HTTP方法不要求攜帶CSRF令牌。test()是js正則表達式方法，若模板匹配成功，則返回true
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
    beforeSend: function(xhr, settings) {
        if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        }
    }
});
/****************** END ******************/

上面代碼的做用就是讓你的ajax的POST方法帶上CSRF須要的令牌，它依賴jQuery庫，必須提早加載jQuery。這也是Django官方提供的解決方案，請參考。

方法二（用在HTML文件中）

簡單快捷的解決辦法，示例以下。

$.ajax({
    type: "POST",       // POST方法
    url: "{% url 'oper:course_add_comment' %}",     // 處理請求的url
    data: {'course_id': {{ course_id }}, 'comment': comment},
    async: true,
    cache: false,
    beforeSend: function (xhr, settings) {
        xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");    // 重點是這裏! 注意{{ csrf_token }}必須加上引號!
    },
    success: function (data) {          // 請求成功後，視圖傳回的數據
        if (data.status == 'fail') {
            if (data.msg == '用戶未登陸') {
                alert("您還未登陸，不能評論！點擊右上角登陸按鈕進行登陸。");
            } else {
                alert(data.msg)
            }

        } else if (data.status == 'success') {
            alert(data.msg);
            location.reload();         // 刷新當前頁面
        }
    },
});

 

　　至此，轉載請註明出處。

[ 本站相關連接：>>Django部署 ]