Django REST throwing [Errno 54] Connection reset by peer and Bad Request

Question

I am using Django REST API for my server in combination with Djoser library for authentication. The client part is written with Vue.js, and I use Axios for API requests.

Now I am trying to make the server and client parts interact. I have started with authentication.

My server is up on 127.0.0.1:8000. When I use Postman to request an authentication token based on username and password, I send a POST request and get a response:

Then, I am trying to reproduce such a request using Vue and Axios. I have defined a component named Login and written the following there:

import axios from 'axios'

axios.defaults.headers.post['Content-Type'] = 'application/json';

export default {
    name: "Login",
    data() {
        return {
            login: '',
            password: ''
        }

    },
    methods: {
        setLogin() {
            axios({
              method: 'post',
              url: 'http://127.0.0.1:8000/auth/token/create/',
              data:
                  {username: this.login,
                   password: this.password}
            })
            .then(function (response) {
                 sessionStorage.setItem("auth_token", response.data.attributes.auth_token)
            })
            .catch(function (error) {
                 console.log(error);
            });
        }
    }
}

And the template consists of just 2 inputs (for login and password) with v-model=login and v-model=password and a button with @click="setLogin".

I have imported this component in App.js and display it here.

Now when I am trying to authorize, I have several issues:

1) The page is reloaded so quickly after hitting Submit that I cannot read anything in the console.

2) In the server log I see 2 errors:

Unsupported Media Type: /auth/token/create/
[22/Jun/2019 11:37:08] "POST /auth/token/create/ HTTP/1.1" 415 176

And

ConnectionResetError: [Errno 54] Connection reset by peer

What could be the cause of such behaviour? I am quite lost, as I see that in Postman everything is OK, but when I perform the same with Axios, nothing is OK.

Update

I tried performing a GET request to the server with Axios. Everything went just fine. The code is the following:

axios.defaults.headers.common['Content-Type'] = 'application/json';


export default {
    name: "Vacancy",
    data() {
        return {
            vacancies: ''
        }

    },
    mounted() {
        let url = 'http://127.0.0.1:8000/api/v1/jobs/vacancies/?';
        axios({
              method: 'get',
              url: url,
              query: {
                  id: 1
              }


       })
           .then(response => (this.vacancies = response.data.data))
           .catch(error => (alert(error)));
        }
}

However, this is a request to my own API, not to Djoser. Maybe the issue is with Djoser?

Valeria S. Valeria S. · Accepted Answer · 2019-06-23T20:53:01

The issue is resolved :)

In fact, Djoser cannot accept the request of type application/json. This can be verified by performing an OPTIONS request to /auth/token/create endpoint. So we need to make a request in one of the supported formats:

"parses": [
        "application/vnd.api+json",
        "application/x-www-form-urlencoded",
        "multipart/form-data"
    ],

I have chosen application/x-www-form-urlencoded. So now the question was to send such a request with Axios:

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';


var querystring = require('querystring');
setLogin() {
            axios({
              method: 'post',
              url: 'auth/token/create/',
              data:
                  querystring.stringify({username: this.login, password: this.password})
            })
                .then(response => (
                    localStorage.setItem("auth_token", response.data.data.attributes.auth_token)
                ))
                .catch(error =>
                    alert(error)
                )
        }

Django REST throwing [Errno 54] Connection reset by peer and Bad Request

1 Answers