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

vue-resource post數據

this.$http.post(’/someUrl’,data, [options]).then(function(response){ // 響應成功回調}, function(response){ // 響應錯誤回調});

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

我們在html 頁面里加入{% csrf %}來讓django渲染出一個csrf的標簽

（如果是form 提交表單的話，我們要把這個標簽加在form標簽內，如果是用xhr提交的話寫在html頁面里就可以了）

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

data{ csrfmiddlewaretoken: ’{{ csrf_token }}’ }

這樣django解析表單時會解析到csrf_token, 我們post的數據就不會遇到403 forbidden了。

其實這樣是投機取巧的行為，這樣雖然django 也能識別，但是遇到復雜的數據時就不行了，比如數組，vue-resource post 數組的時候， 因為我之前在post的option里加了一個option {emulateJSON: true},這樣vue-resource 在post數據時，會把data 轉換成 application/x-www-form-urlencoded表單格式，但是這樣的話，post 的數組就會被解析成arrry[0]item 這樣的話，后端是不識別的，會報錯。

解決方式查到是把csrftoken 放在報頭里，data 傳數據，具體解決方式是加一條

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

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

其中報頭的話django 在后臺解析的時候會自動加上HTTP_的前綴，所以說我們的報頭是 X-CSRFToken就可以了。

補充知識：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() })

以上這篇vue-resource post數據時碰到Django csrf問題的解決就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。