vue-resourcepost數(shù)據(jù)時(shí)碰到Djangocsrf問題的解決

公司最近用vue寫前端，用vue-resource遇到的一些問題，現(xiàn)在記錄下來。

成都創(chuàng)新互聯(lián)是專業(yè)的岳池網(wǎng)站建設(shè)公司，岳池接單;提供成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì),網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行岳池網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

vue-resource post數(shù)據(jù)

this.$http.post('/someUrl',data, [options]).then(function(response){
  // 響應(yīng)成功回調(diào)
}, function(response){
  // 響應(yīng)錯(cuò)誤回調(diào)
});

vue-resource 向后端請求api, 公司的后臺(tái)是用Django 開發(fā)的，Django為了防止跨站請求偽造，即csrf攻擊，提供了CsrfViewMiddleware中間件來防御csrf攻擊。

我們在html 頁面里加入{% csrf %}來讓django渲染出一個(gè)csrf的標(biāo)簽

（如果是form 提交表單的話，我們要把這個(gè)標(biāo)簽加在form標(biāo)簽內(nèi)，如果是用xhr提交的話寫在html頁面里就可以了）

不寫在form 表單內(nèi)，但是實(shí)現(xiàn)效果是一樣的，我們都需要在post 的表單中提供csrftoken我們在vue里要傳送的的data 里要加上csrf的key

data{
  csrfmiddlewaretoken: '{{ csrf_token }}' 
}

這樣django解析表單時(shí)會(huì)解析到csrf_token, 我們post的數(shù)據(jù)就不會(huì)遇到403 forbidden了。

其實(shí)這樣是投機(jī)取巧的行為，這樣雖然django 也能識(shí)別，但是遇到復(fù)雜的數(shù)據(jù)時(shí)就不行了，比如數(shù)組，vue-resource post 數(shù)組的時(shí)候，因?yàn)槲抑霸趐ost的option里加了一個(gè)option {emulateJSON: true},這樣vue-resource 在post數(shù)據(jù)時(shí)，會(huì)把data 轉(zhuǎn)換成 application/x-www-form-urlencoded表單格式，但是這樣的話，post 的數(shù)組就會(huì)被解析成arrry[0]item 這樣的話，后端是不識(shí)別的，會(huì)報(bào)錯(cuò)。

解決方式查到是把csrftoken 放在報(bào)頭里，data 傳數(shù)據(jù)，具體解決方式是加一條

Vue.http.headers.common['X-CSRFToken'] = $("input[name='csrfmiddlewaretoken']").val()

其中$("input[name='csrfmiddlewaretoken']").val() 是取django 的{% csrf %}在模板解析后生成的input里的csrftoken。

其中報(bào)頭的話django 在后臺(tái)解析的時(shí)候會(huì)自動(dòng)加上HTTP_的前綴，所以說我們的報(bào)頭是 X-CSRFToken就可以了。

補(bǔ)充知識(shí)：VUE向django發(fā)送post返回403：CSRF Failed: CSRF token missing or incorrect

問題描述

前端是VUE，后端是django。

VUE用axios向后端發(fā)送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()
   })

但是服務(wù)器返回403錯(cuò)誤，點(diǎn)開一看，CSRF Failed: CSRF token missing or incorrect

原因

根據(jù)這個(gè)鏈接https://stackoverflow.com/a/26639895

這是一個(gè)django的跨域訪問問題。

django，會(huì)對合法的跨域訪問做這樣的檢驗(yàn)，cookies里面存儲(chǔ)的'csrftoken'，和post的header里面的字段”X-CSRFToken'作比較，只有兩者匹配，才能通過跨域檢驗(yàn)。否則會(huì)返回這個(gè)錯(cuò)誤:CSRF Failed: CSRF token missing or incorrect

解決方法

由上面的分析可以得出，只要在POST請求的header添加一個(gè)字段'X-CSRFToken'，這個(gè)字段和cookie里面的‘csrftoken'一樣就好了。

在post請求添加一個(gè)header，內(nèi)容如下：

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

其中，getCookies是這樣一個(gè)函數(shù),用于將cookies里面的內(nèi)容按名字取出:

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()
   })

以上這篇vue-resource post數(shù)據(jù)時(shí)碰到Django csrf問題的解決就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持創(chuàng)新互聯(lián)。

網(wǎng)頁名稱：vue-resourcepost數(shù)據(jù)時(shí)碰到Djangocsrf問題的解決
文章網(wǎng)址：http://www.muchs.cn/article30/piejpo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、網(wǎng)站設(shè)計(jì)、網(wǎng)站策劃、網(wǎng)站改版、網(wǎng)站設(shè)計(jì)公司、服務(wù)器托管

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容