vue 發送 post 請求到 django 返回403： CSRF Failed: CSRF token missing or incorrect

問題描述

前端 vue, 后端 django 。前端在發送post到后端時返回 403：CSRF Failed: CSRF token missing or incorrect

原因

django，會對合法的跨域訪問做這樣的檢驗，cookies里面存儲的’csrftoken’，和post的header里面的字段”X-CSRFToken’作比較，只有兩者匹配，才能通過跨域檢驗。否則會返回這個錯誤:CSRF Failed: CSRF token missing or incorrect

解決方法

在post 請求頭中添加 X-CSRFToken ，這個值可以在 cookie 中獲得
如下：

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

export const register = parmas => { return axios.post(`${host}/users/`, parmas,{headers:{'X-CSRFToken': getCookie("csrftoken")}}) }