Ajax请求中提交csrfToken | Ajax

方式一：

django模板标签提供{% csrf_token %}在前端生成input框，如果在settings.py文件中开启了该中间件，每次post请求就需要提交django自动生成的csrfToken;

将{% csrf_token %}生成的input框的value通过ajax传参来提交;

{% csrf_token %}  <!-- django模板标签提供的csrf_token值,会自动生成一个input框-->
<script>
    $("#button_name").on("click",function{
        var name = $("#name").val();
        var csrfToken = $("[name="csrfmiddlewaretoken"]").val();
        $.ajax({
            url: "/ajax_res/",  // 请求视图
            type: "post",  // 请求方式
            // 携带数据,从{% csrf_token %}input框中获取csrfToken值,通过ajax方式提交后台,否则报错:Forbidden(CSRF token missing or incorrect.)
            data: {"name": name, "csrfmiddlewaretoken": csrfToken}  
            success: function(args){
                alert(args)  // 返回数据
                //...
            }
        });
    });
</script>

方式二：

从获取当前页面的get请求的响应中cookie里获取csrfToken，再写入当前post请求的请求头中;

需要引入：jquery.cookie.js插件

<script>
    $.ajax({
        url: "/ajax_res/",  
        type: "post",  
        headers: {"X-CSRFToken":$.cookie("csrftoken")},
        data: {"name": name}  
        success: function(args){
            alert(args)  
            //...
        }
    });
</script>

方式三：

与方式二原理相同，手写从cookie中获取/写入csrfToken的js文件，再引入，就不需要做其他参数传递，同get请求一般;

// ajaxSetup.js
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');
// 2.定义不需要csrftoken的请求方式
function csrfSafeMethod(method) {
  // these HTTP methods do not require CSRF protection
  return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
// 3.将csrftoken写入当前请求头
$.ajaxSetup({
  beforeSend: function (xhr, settings) {
    if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
      xhr.setRequestHeader("X-CSRFToken", csrftoken);
    }
  }
});

Ajax请求中提交csrfToken | Ajax

猜你喜欢