解决Ajax发送post请求出现403Forbidden的三种⽅式
众所周知前端向后台发送 post 请求时，必须验证csrf，否则会报错403 Forbidden。使⽤ Django Form 表单可以直接在表单⾥⾯添加{% csrf_token %}即可，要是通过 Ajax 发送请求⼜该怎么办？下⾯提供三种解决办法：
<ul id="ddd">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<button id="btn" type="button">Ajax 发送</button>
1. ⽅式⼀
<script src="{% static 'js/jquery-3.1.1.js' %}"></script>
<script>
$('#btn').click(function () {
var li_content = [];
$('#ddd').children('li').each(function () {
li_content.push($(this).html());
});
console.log(li_content);
$.ajax({
url: '/webs/test_json/',
type: 'post',
data: {
'li_list': JSON.stringify(li_content),
csrfmiddlewaretoken: '{{ csrf_token }}'  // 添加这句
},
success: function (arg) {
console.log(arg);
}
})
})
</script>
2. ⽅式⼆
⽅式⼆仅在 Django 中适⽤，因为{% csrf_token %}是 Django 的模板语⾔，它会⽣成⼀个隐藏的input标签
<ul id="ddd">
{% csrf_token %}  <!--添加这句会⽣成⼀个隐藏的 input 标签，name='csrfmiddlewaretoken'-->
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<button id="btn" type="button">Ajax 发送</button>
<script src="{% static 'js/jquery-3.1.1.js' %}"></script>
<script>
$('#btn').click(function () {
var li_content = [];
$('#ddd').children('li').each(function () {
li_content.push($(this).html());
});
console.log(li_content);
$.ajax({
url: '/webs/test_json/',
type: 'post',
data: {
'li_list': JSON.stringify(li_content),
csrfmiddlewaretoken:$('[name="csrfmiddlewaretoken"]').val() // 添加这句，去获取 input 的值
},
success: function (arg) {
console.log(arg);
}
})
})
</script>
3. ⽅式三
因为cookie中同样存在csrftoken，所以可以在js中获取：$.cooke("cstftoken")，并将其添加到请求头中发送。
1、直接添加请求头：
$.ajax({
url: '/webs/test_json/',
headers: { "X-CSRFtoken":$.cookie("csrftoken")}，
type: 'post',
data: {
'li_list': JSON.stringify(li_content)
},
success: function (arg) {
console.log(arg);
}
})
})
2、如果页⾯有多个 Ajax，那么可以设置全局的：
发送请求前会事先执⾏$.ajaxSetup()⽅法，它会从cookie中获取csrftoken
$.ajaxSetup({
beforeSend: function (xhr, settings) {
if (!pe) && !ssDomain) {
xhr.setRequestHeader("X-CSRFToken", $.cookie('csrftoken'));
}
}
});
$.ajax({
url: '/webs/test_json/',
type: 'post',
data: {
'li_list': JSON.stringify(li_content)
},
success: function (arg) {
console.log(arg);
}
})
3、如果想要实现在当get⽅式的时候不需要提交csrftoken，当post的时候需要，实现这种效果的代码如下：<script src="{% static 'js/jquery-3.1.1.js' %}"></script>
<script type="text/javascript" src="/static/kie.js"></script>
<script>
$('#btn').click(function () {
var li_content = [];
$('#ddd').children('li').each(function () {
li_content.push($(this).html());
});
console.log(li_content);
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
/*
全局Ajax中添加请求头X-CSRFToken，⽤于跨过CSRF验证
*/
$.ajaxSetup({
beforeSend: function (xhr, settings) {
if (!pe) && !ssDomain) {
xhr.setRequestHeader("X-CSRFToken", $.cookie('csrftoken'));
}
}
});
$.ajax({
url: '/webs/test_json/',
type: 'post',
data: {
'li_list': JSON.stringify(li_content)
},
success: function (arg) {
发送ajax请求的步骤console.log(arg);
}
})
})
</script>
Tips：⼀定要导⼊kie.js和jquery-3.3.1.js⽂件

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。