ajax头文件报错,AJAX的CSRF保护

如果使用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这个文件可以直接用在很多地方。