2017-06-23 102 views
4

我試圖從React/Redux/Django webapp中刪除jQuery,並用Fetch API替換$.ajax方法。我已經或多或少地讓所有的GET請求工作正常,我似乎能夠打我的POST請求,但我似乎無法格式化我的請求,以實際得到我的POST數據到Django request.POST對象。每當我點擊/ sign_in視圖時,request.POST對象都是空的。我整個應用程序的後端是圍繞使用Django表單(沒有Django模板,只有React控制的組件)構建的,我真的很想不必重寫我的所有視圖以使用request.bodyrequest.data爲Django POST請求獲取API

這是所有我能想到這將是相關的代碼,請讓我知道如果有更多的,將是有益的:

這是咖喱功能我用它來建立我的完整的POST數據和附加CSRF令牌:

const setUpCsrfToken =() => { 
    const csrftoken = Cookies.get('csrftoken') 

    return function post (url, options) { 
    const defaults = { 
    'method': 'POST', 
    'credentials': 'include', 
    'headers': { 
     'X-CSRFToken': csrftoken, 
     'Content-Type': 'application/x-www-form-urlencoded' 
    } 
    } 

    const merged = merge(options, defaults) 
    return fetch(url, merged) 
    } 
} 

export const post = setUpCsrfToken() 

這是API方法,我從我的陣營應用程序中使用:

export const signIn = data => { 
    return post('/api/account/sign_in/', data) 
} 

當它在應用程序做出反應本身最初是打包的數據是與字符串值的對象一樣簡單:

{ 
    email: '[email protected]', 
    password: 'password 
} 

我已經看了這些問題,並發現他們是名義上有益的,但我想不出來合成一個答案爲我自己考慮了什麼,我認爲是一些Django的錯綜複雜的:

question

question

question

question

謝謝!

+0

面對同樣的情況,有沒有什麼解決辦法?任何更好的方法來跳過視圖中的更改。 – Ajaykumar

回答

2

您必須設置適當的X-Requested-With標題。 jQuery做到這一點under the hood

X-Requested-With: XMLHttpRequest 

所以,在你的榜樣,你會希望是這樣的:

const setUpCsrfToken =() => { 
    const csrftoken = Cookies.get('csrftoken') 

    return function post (url, options) { 
    const defaults = { 
     'method': 'POST', 
     'credentials': 'include', 
     'headers': new Headers({ 
     'X-CSRFToken': csrftoken, 
     'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8', 
     'X-Requested-With': 'XMLHttpRequest' 
     }) 
    } 

    const merged = merge(options, defaults) 
    return fetch(url, merged) 
    } 
}