如果使用ajax傳輸數據，需要在AJAX中要使用csrf保護。

一般而言，即在后端已經使用了CSRFProtect(app)的前提下，

如果想使用ajax，避免400的報錯，可以前端的表單里引入標簽,如下所示

login.html

然后在js中的ajax代碼塊中將csfr包裹起來：

login.js

$(function () {

$('#submit').click(function (event) {

// 阻止默認的提交表單的行為

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也作為數據傳輸過去

},

'success': function (data) {

console.log(data);

},

'fail': function (error) {

console.log(error);

}

});

});

});

以上方法是完全可行的，但是太low逼了，雖然后臺通過wtform可以正確拿到數據：

form=LoginForm(request.form)

if form.validate():

email=form.email.data

password=form.password.data

print(email,password)

參考官方文檔，官方文檔給出的建議是如果是ajax，最好是在頭文件寫csrf-token，即手動的添加X-CSRFToken到Header中。但是CSRF從哪里來，還是需要通過模板給渲染，Flask比較推薦的方式是在前端html文件的meta標簽中渲染csrf，如下:

login.html

參考官方文檔，如果要發送AJAX請求，則在發送之前要添加CSRF,官網文檔里有這樣一段很屌的代碼如下(使用了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)

}

}

})

于是，相應的最初版的login.js改寫成如下的形式

login.js

$(function () {

$('#submit').click(function (event) {

// 阻止默認的提交表單的行為

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);

}

});

});

});

這是按照官方文檔標準的寫法，但是也太麻煩了。。。。。

所以，我們可以自己封裝一個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) {

// 設置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標簽中渲染csrf,同時調用myajax.js，如下:

base.html

Title

{% block head %}{% endblock %}

導航條

{% block body %}{% endblock %}

底部欄

附上login.html代碼,在其中引入了login.js：

{% extends 'base.html' %}

{% block head %}

{% endblock %}

{% block body %}

郵箱：
密碼：

{% endblock %}

最后在login.js中調用封裝好的myajax.post替代原聲的$.ajax.post:

login.js

/**

* Created by hynev on 2017/11/10.

*/

//jquery

//XMLHTTTPRequest

//整個文檔都加載完畢后才會執行這個函數

$(function(){

$('#submit').click(function(event){

//阻止默認的提交表單的行為

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);

}

});

});

});

這個myajax.js這個文件可以直接用在很多地方。

總結

以上是生活随笔為你收集整理的ajax头文件报错,AJAX的CSRF保护的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。