問題

私は、ReactJSインターフェイスを介してログインやログアウトなどのAPIを提供したいと考えています。 Djangoドキュメントここでは、ログインやログアウトなどのURLをアカウント/提供するを参照してください。私はちょうどアカウントの下でログインとログアウトのAPIを活用し、テンプレートを作成せずにPostmanで試してみ

 {
    "username": "admin",
    "password": "admin"
}
 

csrfmiddlewaretokenとCSRFTokenを持つCookieがエラーForbidden (CSRF token missing or incorrect.): /accounts/login/

  ベストアンサー

認証に組み込まれたDjangoフォームを使用する場合、JSONデータを渡すことでは実行できません。代わりに、独自のAPIエンドポイントを作成し、将来の要求に使用するためにクライアントに何らかの認証トークンを返す方がはるかに優れています。そのような場合、CSRFトークンは必要ないかもしれません。

あるいは、Djangoページ内で反応アプリをホストし、認証にDjangoを使用することもできます。この場合、Djangoはトークンを処理する必要はありません。しかし、これはあまり一般的なアプローチではなく、すべての場合には機能しない可能性があります。


CSRFトークンを注入するには、ReactJSを使用しているときにいくつかの異なる方法があります

React/AxiosでのCSRFトークンの処理

Axiosクライアントの場合は、3つのオプションがあります。

  1. 各Axios呼び出しのヘッダーにCSRFトークンを手動で添付することができます
  2. 各呼び出しに Axios xsrfHeaderName を使用することができます。
  3. デフォルトの xsrfHeaderName (axios.defaults.xsrfHeaderName = "X-CSRFToken")

これ以上の構成なしでAxiosでCSRFトークンを使用する方法は次のとおりです。

 import axios from 'axios';

axios.defaults.xsrfCookieName = 'csrftoken'
axios.defaults.xsrfHeaderName = 'X-CSRFToken'
 

React/FetchでのCSRFトークンの処理

 fetch(url, {
    credentials: 'include',
    method: 'POST',
    mode: 'same-origin',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
      'X-CSRFToken': csrftoken
    },
    body: {}
   })
  }
 

React/Reduxを使用したCSRFの処理

Redux を使用してアプリケーションの状態を管理している場合は、redux-csrf を使用して Redux で CSRF トークンを処理できます。

最初にnpmからインストールすることで使用できます

 npm install redux-csrf --save
 

次に、Redux ストアで CSRF トークンを設定する setCsrfToken(token) API を使用できます。

  同じタグがついた質問を見る

djangodjango-authentication