ajax头文件报错,AJAX的CSRF保护
如果使用ajax傳輸數(shù)據(jù)，需要在AJAX中要使用csrf保護(hù)。
一般而言，即在后端已經(jīng)使用了CSRFProtect(app)的前提下，
如果想使用ajax，避免400的報(bào)錯(cuò)，可以前端的表單里引入標(biāo)簽,如下所示
login.html
然后在js中的ajax代碼塊中將csfr包裹起來(lái)：
login.js
$(function () {
$('#submit').click(function (event) {
// 阻止默認(rèn)的提交表單的行為
event.preventDefault();
var email = $('input[name=email]').val();
var password = $('input[name=password]').val();
var csrftoken = $('input[name=csrf_token]').val()
$.post({
'url': '/login/',
'data': {
'email': email,
'password': password,
'csrf_token':csrftoken
// 把csrf也作為數(shù)據(jù)傳輸過(guò)去
},
'success': function (data) {
console.log(data);
},
'fail': function (error) {
console.log(error);
}
});
});
});
以上方法是完全可行的，但是太low逼了，雖然后臺(tái)通過(guò)wtform可以正確拿到數(shù)據(jù)：
form=LoginForm(request.form)
if form.validate():
email=form.email.data
password=form.password.data
print(email,password)
參考官方文檔，官方文檔給出的建議是如果是ajax，最好是在頭文件寫csrf-token，即手動(dòng)的添加X(jué)-CSRFToken到Header中。但是CSRF從哪里來(lái)，還是需要通過(guò)模板給渲染，Flask比較推薦的方式是在前端html文件的meta標(biāo)簽中渲染csrf，如下:
login.html
參考官方文檔，如果要發(fā)送AJAX請(qǐng)求，則在發(fā)送之前要添加CSRF,官網(wǎng)文檔里有這樣一段很屌的代碼如下(使用了jQuery)，在頭文件里處理了csrftoken：
var csrftoken = $('meta[name=csrf-token]').attr('content')
$.ajaxSetup({
beforeSend: function(xhr, settings) {
if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken)
}
}
})
于是，相應(yīng)的最初版的login.js改寫成如下的形式
login.js
$(function () {
$('#submit').click(function (event) {
// 阻止默認(rèn)的提交表單的行為
event.preventDefault();
var email = $('input[name=email]').val();
var password = $('input[name=password]').val();
// 得到head中的csrf-token的attr值
var csrftoken = $('meta[name=csrf-token]').attr('content')
$.ajaxSetup({
beforeSend: function(xhr, settings) {
if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken)
}
}
});
$.post({
'url': '/login/',
'data': {
'email': email,
'password': password,
// 注意與最初的版本的不同
},
'success': function (data) {
console.log(data);
},
'fail': function (error) {
console.log(error);
}
});
});
});
這是按照官方文檔標(biāo)準(zhǔn)的寫法，但是也太麻煩了。。。。。
所以，我們可以自己封裝一個(gè)myajax.js文件:
myajax.js
var myajax = {
'get':function(args) {
args['method'] = 'get';
this.ajax(args);
},
'post':function(args) {
args['method'] = 'post';
this.ajax(args);
},
'ajax':function(args) {
// 設(shè)置csrftoken
this._ajaxSetup();
$.ajax(args);
},
'_ajaxSetup': function() {
$.ajaxSetup({
'beforeSend':function(xhr,settings) {
if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type) && !this.crossDomain) {
var csrftoken = $('meta[name=csrf-token]').attr('content');
xhr.setRequestHeader("X-CSRFToken", csrftoken)
}
}
});
}
};
接著在前端html文件的meta標(biāo)簽中渲染csrf,同時(shí)調(diào)用myajax.js，如下:
base.html
Title{% block head %}{% endblock %}
導(dǎo)航條
{% block body %}{% endblock %}
底部欄
附上login.html代碼,在其中引入了login.js：
{% extends 'base.html' %}
{% block head %}
{% endblock %}
{% block body %}
| 郵箱： | |
| 密碼： | |
{% endblock %}
最后在login.js中調(diào)用封裝好的myajax.post替代原聲的$.ajax.post:
login.js
/**
* Created by hynev on 2017/11/10.
*/
//jquery
//XMLHTTTPRequest
//整個(gè)文檔都加載完畢后才會(huì)執(zhí)行這個(gè)函數(shù)
$(function(){
$('#submit').click(function(event){
//阻止默認(rèn)的提交表單的行為
event.preventDefault();
varemail=$('input[name=email]').val();
varpassword=$('input[name=password]').val();
myajax.post({
'url':'/login/',
'data':{
'email':email,
'password':password
},
'success':function(data){
console.log(data);
},
'fail':function(error){
console.log(error);
}
});
});
});
這個(gè)myajax.js這個(gè)文件可以直接用在很多地方。
總結(jié)
以上是生活随笔為你收集整理的ajax头文件报错,AJAX的CSRF保护的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 华为第四代服务器芯片Hi1620,华为第
- 下一篇： 登陆共享服务器的位置,共享服务器哪里登陆