curl - type - send json with axios

DRF y axios-token auth no devuelve el token con axios, pero lo hace con curl

Question

Si ejecuto este comando curl , funciona:

-> curl -X POST http://localhost:8000/api/token-auth/ --data "username=garfonzo&password=garfonzo"
-> {"token":"79b2428019994713d61bb2f728ae62ae8c8be9ee"}%

Pero si hago lo siguiente con axios, falla con un 401 devuelto:

const API_URL = ''http://localhost:8000/api/''
const LOGIN_URL = API_URL + ''token-auth/''

// "creds" in this situation is a dict of { username: ''garfonzo'', password: ''garfonzo'' }
axios.post(LOGIN_URL, creds).then((response) => {
  localStorage.setItem(''token'', response.data.token)
  this.user.authenticated = true

  // If a redirect link is provided
  if (redirect) {
    router.push(redirect)
  }
}).catch((err) => {
  console.log(err)
})

Respuesta del servidor:

->"POST /api/token-auth/ HTTP/1.1" 401 27

¿Qué estoy haciendo mal?

Editar: Además, esta solicitud de axios se está realizando en un proyecto vueJS

EDITAR Esto es lo que muestra la pestaña Red de las herramientas de desarrollo de Chrome al hacer la solicitud a través de axios:

Request URL:http://localhost:8000/api/token-auth/
Request Method:POST
Status Code:401 Unauthorized
Remote Address:127.0.0.1:8000
Referrer Policy:no-referrer-when-downgrade
Response Headers
view source
Access-Control-Allow-Origin:*
Allow:POST, OPTIONS
Content-Type:application/json
Date:Wed, 23 Aug 2017 19:18:00 GMT
Server:WSGIServer/0.1 Python/2.7.12
WWW-Authenticate:Token
X-Frame-Options:SAMEORIGIN
Request Headers
view source
Accept:*/*
Accept-Encoding:gzip, deflate, br
Accept-Language:en-US,en;q=0.8
Authorization:Token null
Connection:keep-alive
Content-Length:27
Content-Type:application/x-www-form-urlencoded;charset=UTF-8
Host:localhost:8000
Origin:http://localhost:8080
Referer:http://localhost:8080/
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.101 Safari/537.36
Form Data
view source
view URL encoded
username:garfonzo
password:garfonzo
Name
jquery-3.1.1.slim.min.js
bootstrap.min.js
vee-validate.js
app.js
?is_brokerage=false
themify.a1ecc3b.woff
__webpack_hmr
token-auth/

Answer 1

Lo descubrí (después de todo un día de depuración ...):

El problema era que DEFAULT_AUTHENTICATION_CLASS de TokenAuthentication impedía incluso que se llamara a la solicitud POST axios . Debido a que mi llamada de axios no contenía un token en el encabezado (ya que ... está tratando de obtener un token) la clase TokenAuthentication lo rechazaría inmediatamente, con el código 401.

Entonces lo que hice fue crear una clase SFObtainAuthToken personalizada que subclasificara el DRF ObtainAuthToken pero lo decore con una clase de authentication_class([]) vacía authentication_class([]) . Luego, cuando SFObtainAuthToken la api/token-auth/ a mi SFObtainAuthToken personalizada, permitirá la solicitud ya que no hay clases de autenticación ligadas a ella.

Espero que esto ayude a alguien más a quedarse con este problema :)

urls

url(r''^api/token-auth/'', SFObtainAuthToken.as_view())

Clase personalizada ObtainAuthToken

from rest_framework.authtoken.views import ObtainAuthToken
from rest_framework.decorators import authentication_classes, permission_classes

@authentication_classes([])
class SFObtainAuthToken(ObtainAuthToken):
    def post(self, request, *args, **kwargs):
        return super(SFObtainAuthToken, self).post(request, *args, **kwargs)

Configuraciones de Django

# DRF Auth stuff
REST_FRAMEWORK = {
  ''DEFAULT_FILTER_BACKENDS'': (
    ''django_filters.rest_framework.DjangoFilterBackend'',
  ),
  ''DEFAULT_AUTHENTICATION_CLASSES'': (
    ''rest_framework.authentication.TokenAuthentication'',
  ),
}