django drf vue axios post 403 token问题解决

403问题的出现的根源在于，

token可以尽量保护网站不受恶意攻击，表单的话很简单，{% csrf_token %}就可以了，ajax就很麻烦，官网也明确表示这很不方便

具体来说，你访问的每个django动态页面的cookie 里面，都有一个csrftoken的值。

当用户进行敏感操作，比如post的时候，后台会比对提交过来的请求头里面的token（默认是没有的），是否与cookie里面的token一致。

这是官网提供的获取token值的函数，这里我用在vue2.6中，更改了一下格式。

//这个函数在methods:{}中
getCookie: function(name) {
            let cookieValue = null;
            if (document.cookie && document.cookie !== '') {
                const cookies = document.cookie.split(';');
                for (let i = 0; i < cookies.length; i++) {
                    const cookie = cookies[i].trim();
                    // Does this cookie string begin with the name we want?
                    if (cookie.substring(0, name.length + 1) === (name + '=')) {
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break;
                    }
                }
            }
            return cookieValue;
},

 而请求头是一个字典，所以我们在进行asiox.post操作时，提前在asiox请求头中加入token值

//这是一个提交函数，依旧在methods:{}中
upBud: function(){
            
                url = "输入你用的路径"
                postdata ={}
               
                //请求头验证token
                token = this.getCookie('csrftoken')
                axios.defaults.headers.common["X-CSRFToken"] = token

                axios.post(url,postdata).then(response =>{
                    // post 成功，response.data 为返回的数据
                    
                    console.log("ok")
                }),err => {
                    // 请求失败
                    console.log(error)
                };

            
        }

因为settings.py默认设置是：

CSRF_HEADER_NAME = "HTTP_X_CSRFTOKEN"

 所以不要瞎改，比如说下面这个，这样是通不过验证的，名字必须得对应。

axios.defaults.headers.common["Token"]

正常情况下，vue drf发送一个post请求应该是这样的

 一个请求头（request headers）同时包含cookie中的csrftoken和X-CSRFToken，并且他们的值一样。

这样就不会出现403错误了。

官网文档介绍（纯js，没有vue）

跨站请求伪造保护 | Django 文档 | Django