vue-resource post數(shù)據(jù)時(shí)碰到Django csrf問(wèn)題的解決
公司最近用vue寫(xiě)前端,用vue-resource遇到的一些問(wèn)題,現(xiàn)在記錄下來(lái)。
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 向后端請(qǐng)求api, 公司的后臺(tái)是用Django 開(kāi)發(fā)的,Django為了防止跨站請(qǐng)求偽造,即csrf攻擊,提供了CsrfViewMiddleware中間件來(lái)防御csrf攻擊。
我們?cè)趆tml 頁(yè)面里加入{% csrf %}來(lái)讓django渲染出一個(gè)csrf的標(biāo)簽
(如果是form 提交表單的話,我們要把這個(gè)標(biāo)簽加在form標(biāo)簽內(nèi),如果是用xhr提交的話寫(xiě)在html頁(yè)面里就可以了)
不寫(xiě)在form 表單內(nèi),但是實(shí)現(xiàn)效果是一樣的,我們都需要在post 的表單中提供csrftoken我們?cè)趘ue里要傳送的的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_的前綴,所以說(shuō)我們的報(bào)頭是 X-CSRFToken就可以了。
補(bǔ)充知識(shí):VUE向django發(fā)送post返回403:CSRF Failed: CSRF token missing or incorrect
問(wèn)題描述
前端是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)開(kāi)一看,CSRF Failed: CSRF token missing or incorrect
原因
根據(jù)這個(gè)鏈接https://stackoverflow.com/a/26639895
這是一個(gè)django的跨域訪問(wèn)問(wèn)題。
django,會(huì)對(duì)合法的跨域訪問(wèn)做這樣的檢驗(yàn),cookies里面存儲(chǔ)的'csrftoken',和post的header里面的字段”X-CSRFToken'作比較,只有兩者匹配,才能通過(guò)跨域檢驗(yàn)。否則會(huì)返回這個(gè)錯(cuò)誤:CSRF Failed: CSRF token missing or incorrect
解決方法
由上面的分析可以得出,只要在POST請(qǐng)求的header添加一個(gè)字段'X-CSRFToken',這個(gè)字段和cookie里面的‘csrftoken'一樣就好了。
在post請(qǐng)求添加一個(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請(qǐng)求如下:
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問(wèn)題的解決就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- 使用django和vue進(jìn)行數(shù)據(jù)交互的方法步驟
- django和vue實(shí)現(xiàn)數(shù)據(jù)交互的方法
- django與vue的完美結(jié)合_實(shí)現(xiàn)前后端的分離開(kāi)發(fā)之后在整合的方法
- django rest framework vue 實(shí)現(xiàn)用戶(hù)登錄詳解
- Python Django Vue 項(xiàng)目創(chuàng)建過(guò)程詳解
- Vue+Django項(xiàng)目部署詳解
- Django與Vue語(yǔ)法的沖突問(wèn)題完美解決方法
- Django+Vue.js搭建前后端分離項(xiàng)目的示例
- Django vue前后端分離整合過(guò)程解析
相關(guān)文章
使用webpack搭建vue項(xiàng)目及注意事項(xiàng)
這篇文章主要介紹了使用webpack搭建vue項(xiàng)目的方法,本文以開(kāi)發(fā)環(huán)境為例,通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06Vue-cli搭建spa項(xiàng)目的項(xiàng)目實(shí)踐
本文主要介紹了Vue-cli搭建spa項(xiàng)目的項(xiàng)目實(shí)踐,首先,你需要安裝Vue CLI,然后通過(guò)它創(chuàng)建新項(xiàng)目,接著,選擇和配置適當(dāng)?shù)牟寮鸵蕾?lài)項(xiàng),以完善你的SPA項(xiàng)目,感興趣的可以了解一下2023-09-09掌握Qwik.js,輕松應(yīng)對(duì)前端SSR渲染問(wèn)題
掌握Qwik.js,輕松應(yīng)對(duì)前端SSR渲染問(wèn)題!本指南將為你揭示如何使用這款強(qiáng)大的框架,讓你在前端開(kāi)發(fā)中游刃有余2023-12-12詳解用vue.js和laravel實(shí)現(xiàn)微信支付
本篇文章主要介紹了用vue.js和laravel實(shí)現(xiàn)微信支付,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06vue在自定義組件上使用v-model和.sync的方法實(shí)例
自定義組件的v-model和.sync修飾符其實(shí)本質(zhì)上都是vue的語(yǔ)法糖,用于實(shí)現(xiàn)父子組件的"數(shù)據(jù)"雙向綁定,下面這篇文章主要給大家介紹了關(guān)于vue在自定義組件上使用v-model和.sync的相關(guān)資料,需要的朋友可以參考下2022-07-07如何使用VuePress搭建一個(gè)類(lèi)型element ui文檔
這篇文章主要介紹了如何使用VuePress搭建一個(gè)類(lèi)型element ui文檔,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02VUE實(shí)現(xiàn)分布式醫(yī)療掛號(hào)系統(tǒng)預(yù)約掛號(hào)首頁(yè)步驟詳情
這篇文章主要為大家介紹了VUE實(shí)現(xiàn)分布式醫(yī)療掛號(hào)系統(tǒng)預(yù)約掛號(hào)首頁(yè)步驟詳情,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-04-04關(guān)于Vue源碼vm.$watch()內(nèi)部原理詳解
這篇文章主要介紹了關(guān)于Vue源碼vm.$watch()內(nèi)部原理詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04