【掉过的坑】VUE向django发送post返回403：CSRF Failed: CSRF token missing or incorrect

问题描述

前端是VUE，后端是django。
VUE用axios向后端发送POST代码如下:

 let params = new URLSearchParams()
    params.append('orderID', orderId)
    params.append('dishID', dishId)
    axios.post(loginUrL, params})
      .then(response => {
        console.log(response)
        cb()
      })
      .catch(error => {
        console.log(error)
        errorCb()
      })

但是服务器返回403错误，点开一看，CSRF Failed: CSRF token missing or incorrect

原因

根据这个链接https://stackoverflow.com/a/26639895
这是一个django的跨域访问问题。
django，会对合法的跨域访问做这样的检验，cookies里面存储的’csrftoken’，和post的header里面的字段”X-CSRFToken’作比较，只有两者匹配，才能通过跨域检验。否则会返回这个错误:CSRF Failed: CSRF token missing or incorrect

解决方法

由上面的分析可以得出，只要在POST请求的header添加一个字段’X-CSRFToken’，这个字段和cookie里面的‘csrftoken’一样就好了。

在post请求添加一个header，内容如下：

{headers: {'X-CSRFToken': this.getCookie('csrftoken')}

其中，getCookies是这样一个函数,用于将cookies里面的内容按名字取出:

getCookie (name) {
      var value = '; ' + document.cookie
      var parts = value.split('; ' + name + '=')
      if (parts.length === 2) return parts.pop().split(';').shift()
    },

最终的POST请求如下:

    params.append('orderID', orderId)
    params.append('dishID', dishId)
    axios.post(loginUrL, params, {headers: {'X-CSRFToken': this.getCookie('csrftoken')}})
      .then(response => {
        console.log(response)
        cb()
      })
      .catch(error => {
        console.log(error)
        errorCb()
      })