CSRFトークンがないか間違っています。 Django + AngularJS

Question

localhostマシンからリモートdjango apiにPOSTリクエストをしているときにCSRFトークンが見つからないか間違ったエラーが発生しました。 AngularJSの

マイセッティング：

.config(['$httpProvider', function($httpProvider){ 

$httpProvider.defaults.xsrfCookieName = 'csrftoken'; 
$httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken'; 

}]); 

が、イムはまだCSRFトークン欠落または不正エラーを取得。

どのヘッダーが送信されているかを確認して、角度が明らかに送信されていないことを確認します。HTTP_X_CSRFTOKEN。

しかし、私はクッキーcsrftoken =何かが送信されていることがわかります。

何が起こっているのか分かりませんか？

要求ヘッダー

POST /s/login/ HTTP/1.1 
Host: server.somewhere.io:8000 
Connection: keep-alive 
Content-Length: 290 
Pragma: no-cache 
Cache-Control: no-cache 
Accept: application/json, text/plain, */* 
Origin: http://localhost 
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.116 Safari/537.36 
Content-Type: application/json;charset=UTF-8 
Referer: http://localhost/thesocialmarkt/ 
Accept-Encoding: gzip, deflate 
Accept-Language: en-GB,en;q=0.8,en-US;q=0.6,pt-BR;q=0.4,pt;q=0.2 
Cookie: csrftoken=hiYq1bCNux1mTeQuI4eNgi97qir8pivi; sessionid=1nn1phjab5yd71yfu5k8ghdch2ho6exc 

Answer 1

角度アプリをもらうためには、ジャンゴによって提供されていないので、@クリスホークスは@Ye劉

によって与えられたこのstackoverflowの答えに指摘したように クッキーを設定するには、角度アプリは最初にdjango にGETリクエストを行う必要があります。

http取得要求をしない限り、csrftokenのCookieは設定されません。したがって、

$httpProvider.defaults.xsrfCookieName = 'csrftoken'; 
$httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken'; 

は動作しません。あなたはまず、実際のものではない場合、httpをdjangoに依頼するモックrest_frameworkを模倣する必要があります。

更新：あなたのご意見は、さらにそれを勉強するために私を押し、と言及している。このblogを、お読みください

クライアント側はCSRFトークンを生成しました。クッキーとカスタムHTTP ヘッダーの両方で、クライアントに の同じ一意の秘密値を生成して送信させます。ウェブサイトを考慮するだけで、独自ドメインのために書く/クッキー を読み取ることが許可されている、唯一の本当のサイトには、両方の ヘッダーに同じ値を送信することができます

だから、最初に、この単一のリクエストで試すことができます。

$http.defaults.headers.post['X-CSRFToken'] = $cookies.csrftoken; 

コントローラ/サービスに$cookiesを注入しています。

それがうまくいくならば、interceptorsを書くことが良い選択になり、デバッグにも役立ちます。

少なくともAngularJsバージョンを使用していることを確信しています。2、

var xsrfValue = urlIsSameOrigin(config.url) 
      ? $$cookieReader()[config.xsrfCookieName || defaults.xsrfCookieName] 
      : undefined; 
     if (xsrfValue) { 
      reqHeaders[(config.xsrfHeaderName || defaults.xsrfHeaderName)] = xsrfValue; 
     } 

、このchangeset と最近では、このコードでCSRFをチェックする角度HTTPサービスをコミット参照してくださいので、それはあなたがクッキーに存在する同じトークンを送信していることが必要です。

さらに、ブラウザの開発ツールを使用して、httpリクエストでリクエスト/応答を表示し、ヘッダーとCookieを分析します。

Answer 2

あなたは、AjaxリクエストのためのAngularJSで$ HTTPを使用している場合、あなたはどのCSRFトークンの問題に直面している場合は、この使用：

$http.defaults.xsrfCookieName = 'csrftoken'; 
$http.defaults.xsrfHeaderName = 'X-CSRFToken';