欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue-resource post數(shù)據(jù)時碰到Django csrf問題的解決

 更新時間:2020年03月13日 14:21:46   作者:牡丹亭外  
這篇文章主要介紹了vue-resource post數(shù)據(jù)時碰到Django csrf問題的解決,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧

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

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

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

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

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

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

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

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

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

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

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

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

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

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

補(bǔ)充知識: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錯誤,點開一看,CSRF Failed: CSRF token missing or incorrect

原因

根據(jù)這個鏈接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,內(nèi)容如下:

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

其中,getCookies是這樣一個函數(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ù)時碰到Django csrf問題的解決就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • 使用webpack搭建vue項目及注意事項

    使用webpack搭建vue項目及注意事項

    這篇文章主要介紹了使用webpack搭建vue項目的方法,本文以開發(fā)環(huán)境為例,通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-06-06
  • vue在圖片上傳的時候壓縮圖片

    vue在圖片上傳的時候壓縮圖片

    這篇文章主要介紹了vue在圖片上傳的時候壓縮圖片,幫助大家緩解服務(wù)器壓力,提高程序性能,感興趣的朋友可以了解下
    2020-11-11
  • Vue-cli搭建spa項目的項目實踐

    Vue-cli搭建spa項目的項目實踐

    本文主要介紹了Vue-cli搭建spa項目的項目實踐,首先,你需要安裝Vue CLI,然后通過它創(chuàng)建新項目,接著,選擇和配置適當(dāng)?shù)牟寮鸵蕾図?以完善你的SPA項目,感興趣的可以了解一下
    2023-09-09
  • 掌握Qwik.js,輕松應(yīng)對前端SSR渲染問題

    掌握Qwik.js,輕松應(yīng)對前端SSR渲染問題

    掌握Qwik.js,輕松應(yīng)對前端SSR渲染問題!本指南將為你揭示如何使用這款強(qiáng)大的框架,讓你在前端開發(fā)中游刃有余
    2023-12-12
  • 詳解用vue.js和laravel實現(xiàn)微信支付

    詳解用vue.js和laravel實現(xiàn)微信支付

    本篇文章主要介紹了用vue.js和laravel實現(xiàn)微信支付,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-06-06
  • vue在自定義組件上使用v-model和.sync的方法實例

    vue在自定義組件上使用v-model和.sync的方法實例

    自定義組件的v-model和.sync修飾符其實本質(zhì)上都是vue的語法糖,用于實現(xiàn)父子組件的"數(shù)據(jù)"雙向綁定,下面這篇文章主要給大家介紹了關(guān)于vue在自定義組件上使用v-model和.sync的相關(guān)資料,需要的朋友可以參考下
    2022-07-07
  • 如何使用VuePress搭建一個類型element ui文檔

    如何使用VuePress搭建一個類型element ui文檔

    這篇文章主要介紹了如何使用VuePress搭建一個類型element ui文檔,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-02-02
  • VUE實現(xiàn)分布式醫(yī)療掛號系統(tǒng)預(yù)約掛號首頁步驟詳情

    VUE實現(xiàn)分布式醫(yī)療掛號系統(tǒng)預(yù)約掛號首頁步驟詳情

    這篇文章主要為大家介紹了VUE實現(xiàn)分布式醫(yī)療掛號系統(tǒng)預(yù)約掛號首頁步驟詳情,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-04-04
  • vue3 非父子組件通信詳解

    vue3 非父子組件通信詳解

    本篇文章主要介紹了詳解Vue 非父子組件通信,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2021-10-10
  • 關(guān)于Vue源碼vm.$watch()內(nèi)部原理詳解

    關(guān)于Vue源碼vm.$watch()內(nèi)部原理詳解

    這篇文章主要介紹了關(guān)于Vue源碼vm.$watch()內(nèi)部原理詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04

最新評論