ajax json 403,解决 Ajax 发送 post 请求出现 403 Forbidden 的三种方式
眾所周知前端向后臺發送 post 請求時，必須驗證 csrf，否則會報錯 403 Forbidden。使用 Django Form 表單可以直接在表單里面添加 {% csrf_token %} 即可，要是通過 Ajax 發送請求又該怎么辦？下面提供三種解決辦法：
- 1
- 2
- 3
Ajax 發送
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 中適用，因為 {% csrf_token %} 是 Django 的模板語言，它會生成一個隱藏的 input 標簽
{% csrf_token %}
123Ajax 發送
$('#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. 方式三
因為 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 (!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、如果想要實現在當 get 方式的時候不需要提交 csrftoken，當 post 的時候需要，實現這種效果的代碼如下：
$('#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 (!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：**一定要導入 jquery.cookie.js 和 jquery-3.3.1.js 文件 ！！！
總結
以上是生活随笔為你收集整理的ajax json 403,解决 Ajax 发送 post 请求出现 403 Forbidden 的三种方式的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 苹果抖音官方账号开通后有多火？粉丝数“高
- 下一篇： 华中科技大学文华学院 CSDN 高校俱乐