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

【问题标题】：Django REST throwing [Errno 54] Connection reset by peer and Bad RequestDjango REST throwing [Errno 54] Connection reset by peer and Bad Request
【发布时间】：2019-11-04 23:47:30
【问题描述】：

我正在为我的服务器使用 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

这种行为的原因可能是什么？我很迷茫，因为我看到在 Postman 中一切都很好，但是当我用 Axios 执行相同的操作时，没有任何问题。

更新

我尝试使用 Axios 向服务器执行 GET 请求。一切都很顺利。代码如下：

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 的问题？

【问题讨论】：

标签： django vue.js axios

【解决方案1】：

问题已解决:)

事实上，Djoser 无法接受application/json 类型的请求。这可以通过对/auth/token/create 端点执行 OPTIONS 请求来验证。所以我们需要以支持的格式之一发出请求：

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

【讨论】：