Error: Request failed with status code 400. missing headers? error in backend?

Question

I'm sending a POST request using axios to my localhost(this case, it's 10.0.0.2:8000) in React Native (android simulator) and I'm getting 400 error from Django RESTful Framework Backend.

This is my action creator

export const doAuthLogin = ({ username, password }) => dispatch => {
  axios.post(`${ROOT_URL}/rest-auth/login/`, {
    username,
    password
  }).then(response => {
    console.log(response);
    // Save Token post is Already await.
    AsyncStorage.setItem('auth_token', response.token);
    dispatch({ type: AUTH_LOGIN_SUCCESS, payload: response.token });
  })
  .catch(response => {
    console.log(response);
    dispatch({ type: AUTH_LOGIN_FAIL, payload: response.non_field_errors });
  });
};

This is error message from Remote Debugger JS. It's just a console.log(response) from catch from axios.post.

Error: Request failed with status code 400
    at createError (createError.js:16)
    at settle (settle.js:18)
    at XMLHttpRequest.handleLoad (xhr.js:77)
    at XMLHttpRequest.dispatchEvent (event-target.js:172)
    at XMLHttpRequest.setReadyState (XMLHttpRequest.js:538)
    at XMLHttpRequest.__didCompleteResponse (XMLHttpRequest.js:381)
    at XMLHttpRequest.js:485
    at RCTDeviceEventEmitter.emit (EventEmitter.js:181)
    at MessageQueue.__callFunction (MessageQueue.js:260)
    at MessageQueue.js:101

Error message in console, [17/Aug/2017 14:14:10] "POST /rest-auth/login/ HTTP/1.1" 400 40

And this is a part of settings.py,

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

INSTALLED_APPS = [
    'corsheaders',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'allauth',
    'allauth.account',
    'rest_auth.registration',
    'rest_framework',
    'rest_framework.authtoken',
    'rest_auth',
    'profiles',
    'allauth.socialaccount',
    'allauth.socialaccount.providers.facebook',
    'allauth.socialaccount.providers.twitter',
    'django.contrib.sites',
]

SITE_ID = 1

CORS_ORIGIN_WHITELIST = (
    '10.0.2.2',
    'localhost'
)

I'm thinking I might have an error in action creator. Missing headers or...

This error doesn't give me any hint more than 400 so I'm totally lost. Can you help me with this problem, please?

Thanks

what parameters are you expecting in djagno? Maybe try to send a request first with a tool like postman, and then try it with code — Proxy
It works in Postman ( localhost:8000/rest-auth/login with username and password) — hellofanengineer
response body is just username and password. username can be either email or username. — hellofanengineer

hellofanengineer hellofanengineer · Accepted Answer · 2017-08-17T15:10:32

Thanks for commenting guys. The problem was that I was actually sending undefined to username and password.

{username, password } -> (username, password)

This question was very silly question, this code is perfect. No CORS error, correct response body, and correct allowed hosts. Actually your comments convinced me that I may have a problem in React code. I consoled log variable in each line.

Thank you so much! Now I can sleep

Error: Request failed with status code 400. missing headers? error in backend?

1 Answers