2017-06-23 8 views
4

React/Redux/Django WebアプリケーションからjQueryを削除し、$.ajaxメソッドをFetch APIに置き換えようとしています。私は多かれ少なかれ、私のGETリクエストがうまく動作していて、私のPOSTリクエストにヒットすることができるようですが、POSTデータを実際にDjango request.POSTオブジェクトに取り込むようにリクエストをフォーマットすることはできません。私の/ sign_inビューに当たるたびに、request.POSTオブジェクトは空です。私のアプリケーション全体のバックエンドは、Djangoフォーム(Djangoテンプレートなし、制御されたコンポーネントのみ)を使用して構築されています。request.bodyまたはrequest.dataを使用するようにすべてのビューを書き直す必要はありません。ここでDjango POSTリクエスト用のFetch API

が、私はそれが関連することだと思うことができるすべてのコードで、参考になるものではありませなら、私に教えてください:

これは私が私の完全なPOSTデータを作成し、添付するために使用するカリー化関数でありますCSRFトークンは:

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

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メソッドであります

それは元々リアクトアプリ自体にパッケージ化されたデータは、文字列値を持つオブジェクトと同様に簡単です:

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

私はこれらの質問を見て、彼らは名目上有用であることが判明しましたが、私は、私が想定し何を考慮に入れて自分のために答えを合成するために把握することはできませんジャンゴの複雑さの一部です:

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) 
    } 
} 
関連する問題