一、环境：
vue2.0、django 1.10.x、iview
二、django后台处理
1、将django的setting的MIDDLEWARE中加入django.middleware.csrf.CsrfViewMiddleware，一般新建的django项目中会自带的。
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
2、在templete的html页的from(iview的<i-form></i-form> 标签)中添加{% csrf %}，后台渲染语法如下：
render(request,'xxxx.html')
二、前端处理
修改axios 请求设置为：这里取当前cookie中的值，赋值在请求头的'X-CSRFToken'变量中
axios.interceptors.request.use((config) => {
config.headers['X-Requested-With'] = 'XMLHttpRequest';
let regex = /.*csrftoken=([^;.]*).*$/;
config.headers['X-CSRFToken'] = document.cookie.match(regex) === null ? null : document.cookie.match(regex)[1];
return config
});这样向后台的请求都会带django生成的那个csrf_token值。中间件csrf模块会截取判断csrf_token值是否一致，如果一致则请求合法。
三、ivew表单效验注意事项
由于使用的是vue2.0 版本，此时绑定的写法有变动。
<i-form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
{% csrf_token %}
<Form-item label="验证码:" prop="uidcode">
<i-input v-model="formValidate.uidcode" laceholder="请输入验证码" style="width:80%"></i-input>
</Form-item>
</i-form>
new Vue({
el: "#temp",
data() {
return {
formValidate: {
uidcode: '',
},
ruleValidate: {
uidcode: [
{ required: true, message: '不能为空！', trigger: 'blur' }
]
}
}
},
methods: {
handleSubmit (name) {
this.$refs[name].validate((valid) => {
if (valid) {
//do something
}
})
},
handleReset (name) {
this.$refs[name].resetFields();
}
},
})
关于django中更多的CSRF问题，详见 利用django中间件CsrfViewMiddleware防止csrf攻击