Vue +Django 开发第二关:Post请求中的CSRF验证

#Vue+Django的第二关:CSRF验证

当看到大大的Forbidden时,知道这是个硬茬.

django为了方式post给网站带来的安全问题,对每次post请求都要求在网页页面设置一个'暗语',用来验证post请求是否合规.

这对于django自带的模板系统来说是个简单方便的事情.

但对于Vue来说就有点头疼了!

处理方法:

方法1:直接干到中间件!这个简单,直接注释掉就行了!但是这个是非常不可取的.

方法二:操作稍微有点复杂,我们慢慢说

1\接上一篇文章中的 django-cors-headers 配置

#配置settings
CORS_ORIGIN_ALLOW_ALL = True # 允许任何域访问

#新增下列内容:
#指明在跨域访问中，后端是否支持对cookie的操作。
CORS_ALLOW_CREDENTIALS = True  # 允许携带cookie

2\在vue端的网络请求配置中设置

import axios from "axios"
// import VueAxios from 'vue-axios'

let requests = axios.create({
    baseURL:'http://192.168.3.19:8008/backend/',
    header:{'Content-Type':"application/x-www-form-urlencoded"},
    // 指明在跨域请求时需要凭证
    withCredentials: true,
})

export default requests

3\通过 django.middleware.csrf 中的 get_token()方法手动获取csrf值

#urls.py文件

urlpatterns = [
    #构建后的后台路径
  # url(r'^index/',views.index),
   #获取csrf的路由配置
   url(r'^get_csrf_token/',views.get_csrf_token),
   # 管理员登录
   #url(r'^login/',views.login)
]

#vews.py 文件
def get_csrf_token(request):
    print(get_token(request))
    return JsonResponse({'csrf_token': get_token(request) or 'NOTPROVIDED'})

4\vue端发送post请求时.先通过get请求服务器 get_csrf_token()方法获取 csrf值,然后将csrf值设置到post请求的header中

get_csrf_token() {
    return new Promise(function(resolve) {
        // 这里发送一个axios 请求
        requests.get("get_csrf_token/")
            .then(function(res) {
                resolve(res.data.csrf_token)
            })
            .catch(function() {
                console.log("get_csrf_token方法获取crsf错误")
            })
    })
},

login(csrftoken) {
    // 这是一个登陆请求
    let _this = this
    console.log('crsf值', csrftoken)
    requests.post("login/", {
            username: this.form.name,
            password: this.form.password
        }, 
        // headers中添加csrftoken值
        {
            headers: {
                "X-CSRFToken": csrftoken
            }
        })
        .then(function(res) {
           // 处理业务的逻辑

        })
        .catch(function(error) {
            //console.log("登录失败")
            console.log(error)
        })
},

submit() {
    // 这里调用promise 方法并调用登录
    let _this = this
    this.get_csrf_token().then(function(res) {
        // 调用login方法
        _this.login(res)
    }).catch(function() {
        console.log('登录方法submit()中,get_crsf_token出现错误')
    })
},