ajax json 403,解决 Ajax 发送 post 请求出现 403 Forbidden 的三种方式
眾所周知前端向后臺(tái)發(fā)送 post 請(qǐng)求時(shí)，必須驗(yàn)證 csrf，否則會(huì)報(bào)錯(cuò) 403 Forbidden。使用 Django Form 表單可以直接在表單里面添加 {% csrf_token %} 即可，要是通過(guò) Ajax 發(fā)送請(qǐng)求又該怎么辦？下面提供三種解決辦法：
- 1
- 2
- 3
Ajax 發(fā)送
1. 方式一
$('#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);
}
})
})
2. 方式二
方式二僅在 Django 中適用，因?yàn)?{% csrf_token %} 是 Django 的模板語(yǔ)言，它會(huì)生成一個(gè)隱藏的 input 標(biāo)簽
{% csrf_token %}
123Ajax 發(fā)送
$('#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);
}
})
})
3. 方式三
因?yàn)?cookie 中同樣存在 csrftoken ，所以可以在 js 中獲取：$.cooke("cstftoken")，并將其添加到請(qǐng)求頭中發(fā)送。
1、直接添加請(qǐng)求頭：
$.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、如果頁(yè)面有多個(gè) Ajax，那么可以設(shè)置全局的：
發(fā)送請(qǐng)求前會(huì)事先執(zhí)行 $.ajaxSetup() 方法，它會(huì)從 cookie 中獲取 csrftoken
$.ajaxSetup({
beforeSend: function (xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
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、如果想要實(shí)現(xiàn)在當(dāng) get 方式的時(shí)候不需要提交 csrftoken，當(dāng) post 的時(shí)候需要，實(shí)現(xiàn)這種效果的代碼如下：
$('#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中添加請(qǐng)求頭X-CSRFToken，用于跨過(guò)CSRF驗(yàn)證
*/
$.ajaxSetup({
beforeSend: function (xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
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);
}
})
})
**Tips：**一定要導(dǎo)入 jquery.cookie.js 和 jquery-3.3.1.js 文件 ！！！
總結(jié)
以上是生活随笔為你收集整理的ajax json 403,解决 Ajax 发送 post 请求出现 403 Forbidden 的三种方式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 苹果抖音官方账号开通后有多火？粉丝数“高
- 下一篇： 华中科技大学文华学院 CSDN 高校俱乐