在目前的大環境趨勢下，前后端分離已經是專案開發的主流，而Django在后端領域也受到眾多程式員的青睞，那么在前后端分離開發時，經常會遇到django本身內置的csrf攔截保護機制
本文將會簡述如何在前后端分離時解決csrf問題，
1，
在我們使用AJAX發送POST請求時，首先要先去請求csrf的Token驗證，也就是說，先提前去獲取token，再去做自己的POST請求操作
那么，就需要單獨撰寫一個函式來獲取token：
//獲取csrftoken
前端AJAX：
function get_csrftoken() {
return new Promise((resolve, reject)=>{
$.ajax({
url:"get_csrf_token/",
type:"GET",
success:function(data){
resolve(data);
},
error: function (err) {
console.log(err);
}
});
});
}
后端Django：
獲取csrf
def get_csrf_token(request):
return JsonResponse({'csrf_token': get_token(request) or 'NOTPROVIDED'})
在自己的專案中添加這倆即可，每次在做POST請求時，記住先呼叫其獲取token，
然后來到第二步：
2，
// 這里是一個添加用戶資訊為例的代碼
async function insertUser() {
{#獲取CSRF驗證#}
let res = await get_csrftoken();
console.log(res.csrf_token);
let csrf_token = res.csrf_token;
let flag = confirm("請確認資訊是否正確，無誤請點確定");
if (flag) {
$.ajax({
headers: {
Accept: "application/json; charset=utf-8",
**// 這里注意，為什么要獲取token，原因就是需要添加一個請求頭，如下：**
"X-CSRFToken": csrf_token
},
url:"insertuser/",
type:"POST",
data:{
"select":{
"username":$("#username").val(),
"password":$("#password").val(),
"age":$("#age").val(),
"gender":$("#gender").val()
}},
success:function(data){
alert(data.data);
window.location.href = "https://www.cnblogs.com/"
},
error: function (err) {
console.log(err);
}
})
}
}
細心的朋友可能已經發現，我使用了promise和async+await，
因為這里是兩個請求，存在異步請求問題，我們必須保證優先獲取到token，
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/514147.html
標籤：其他