django restフレームワークとajaxでトークンを取得する方法

Question

ユーザーがトークンで認証できる残りのAPIを構築したいと考えています。私はrest_framework.authtokenをインストールされたアプリリストに含めました。また、settings.pyに必要な設定を追加しました：

INSTALLED_APPS = (
    ... 
    'rest_framework.authtoken' 
) 

REST_FRAMEWORK = { 
    'DEFAULT_PERMISSION_CLASSES': (
     'rest_framework.permissions.IsAuthenticated', 
    ), 
    'DEFAULT_AUTHENTICATION_CLASSES': (
     'rest_framework.authentication.TokenAuthentication', 
     'rest_framework.authentication.SessionAuthentication', 
    ) 
} 

はpost_save信号に耳を傾け、新たに作成したユーザーの新しいトークンを作成する方法を定義しました。それから私はマイグレーションをしました。新しいユーザーを作成した後、そのユーザーのトークンを見ることができます。私は

http POST 0.0.0.0:80/api-token-auth/ username='user@gmail.com' password='secure123' 

をすれば

はまた、私はだから私はその作業を想定バック

HTTP/1.0 200 OK 
Allow: POST, OPTIONS 
Content-Type: application/json 
Date: Sat, 30 Jul 2016 12:05:30 GMT 
Server: WSGIServer/0.1 Python/2.7.3 
Vary: Cookie 
X-Frame-Options: SAMEORIGIN 

{ 
    "token": "4aecfb249265064c55300d782e4c7e66b8b77063" 
} 

をこの応答を取得します。しかし、私は、Ajaxを使ってログインしようとした場合：私は記事の投稿は、それを使用できるように

jquery-3.1.0.min.js:4 GET http://test.com/api-token-auth/%20username=user@gmail.com%20password=secure123?_=1469883569618 405 (Method Not Allowed)

bundle.js:27453 Method Not Allowed

がどのように認証されたユーザーのためのトークンを取得します：

$.ajax({ 
    url: 'http://test.com/api-token-auth/ username=' + email + ' password='+ password, 
    dataType: 'json', 
    cache: false, 
    success: function(data) { 
     console.log(data); 
    }.bind(this), 
    error: function(xhr, status, err) { 
     console.log(err); 
    }.bind(this) 
}); 

は、私は、ブラウザのコンソールでこのエラーが出ます認証されたユーザーですか？

更新

また、私はこの問題に関連CORSに対処するためにdjango-cors-headersを使用しています。

更新

%20username=user@gmail.com%20password=secure123?_=1469885103431 405 xhr jquery-3.1.0.min.js:4 278 B 29 ms 

更新：デフォルトで追加応答ヘッダ

Answer 1

type又はmethod値はjQuery.ajaxに 'GET'（）メソッドに設定されています。それはあなたが得る応答のように見え、 'POST'と 'OPTIONS'だけを許可します。

jQuery.ajax（）メソッドでtypeまたはmethodの値を 'POST'に設定しようとします。

Answer 2

これは、CORSの問題であり、ここで

Answer 3

に問題がそれをテストするためにクロムをしようとすると、クロム - ブラウザ--disable-のWebセキュリティとそれを開始する代わりに、要求ペイロードにあなたを、データを送信するためでありますGETリクエストのようにURLを通過しています。

あなたはそれが正しく要求を生成するので、あなたが見ることができるように、httpie作品を使用して生成する要求：

要求：

http POST 0.0.0.0:80/api-token-auth/ username='user@gmail.com' password='secure123' 

要求（詳細モード）：

POST /api-token-auth/ HTTP/1.1 
Accept: application/json 
Accept-Encoding: gzip, deflate 
Connection: keep-alive 
Content-Length: 55 
Content-Type: application/json 
Host: 0.0.0.0:8000 
User-Agent: HTTPie/0.9.3 

{ 
    "password": "secure123", 
    "username": "user@gmail.com" 
} 

とは異なります

要求：

http POST "0.0.0.0:8000/api-token-auth/ username='user@gmail.com' password='secure123'" 

要求（詳細モード）：

POST /api-token-auth/%20username='user@gmail.com'%20password='secure123' HTTP/1.1 
Accept: */* 
Accept-Encoding: gzip, deflate 
Connection: keep-alive 
Content-Length: 0 
Host: 0.0.0.0:8000 
User-Agent: HTTPie/0.9.3 

あなたは、私はjQueryのを使用して、正しい方法でデータを送信する方法のhereを見つけ、この例を試すことができます。 （私はそれをテストdin't。）

$.ajax({ 
    type: "POST", 
    url: "/api/articles/", 
    data: JSON.stringify(data), 
    sucess: function() { console.log("Success!"); }, 
    contentType: "application/json; charset=utf-8", 
    dataType: "json", 
    crossDomain:false, 
    beforeSend: function(xhr, settings) { 
     xhr.setRequestHeader("X-CSRFToken", csrftoken); 
    } 
});