Django REST throwing [Errno 54] Сброс соединения по пиру и неверный запрос

Question

Я использую Django REST API для своего сервера в сочетании с библиотекой Djoser для аутентификации.Клиентская часть написана с использованием Vue.js, и я использую Axios для запросов API.

Теперь я пытаюсь заставить серверную и клиентскую части взаимодействовать.Я начал с аутентификации.

Мой сервер работает на 127.0.0.1:8000.Когда я использую Postman для запроса токена аутентификации на основе имени пользователя и пароля, я отправляю запрос POST и получаю ответ:

Затем я пытаюсь воспроизвести такой запросиспользуя Vue и Axios.Я определил компонент с именем Login и написал там следующее:

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);
            });
        }
    }
}

И template состоит всего из 2 входов (для логина и пароля) с v-model=login и v-model=password и кнопки с@click="setLogin".

Я импортировал этот компонент в App.js и отображаю его здесь.

Теперь, когда я пытаюсь авторизоваться, у меня есть несколько проблем:

1) Страница перезагружается так быстро после нажатия кнопки Отправить, что я ничего не могу прочитать в консоли.

2) В журнале сервера я вижу 2 ошибки:

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

И

ConnectionResetError: [Errno 54] Connection reset by peer

Что может быть причиной такого поведения?Я совершенно растерялся, так как вижу, что в Почтальоне все в порядке, но когда я делаю то же самое с Axios, ничего не получается.

Обновление

Я пытался выполнитьGET-запрос к серверу с Axios.Все прошло просто отлично.Код следующий:

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)));
        }
}

Однако это запрос к моему собственному API, а не к Djoser.Может быть, проблема с Djoser?

Answer 1

Проблема решена:)

Фактически, Djoser не может принять запрос типа application/json.Это можно проверить, выполнив запрос OPTIONS к конечной точке /auth/token/create.Поэтому нам нужно сделать запрос в одном из поддерживаемых форматов:

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

Я выбрал application/x-www-form-urlencoded.Так что теперь вопрос был в том, чтобы отправить такой запрос с 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)
                )
        }